Flutter Packge - 组件应用

一、组件创建

  1. 在工程根目录创建 packages 目录。
bash 复制代码
mkdir packages #创建文件夹
cd packages    
  1. 创建纯 Dart Package(适合工具类/UI组件)。
bash 复制代码
flutter create --template=package common_network

二、组件配置

  1. 在 common_network 的 pubspec.yaml 中添加 packge 依赖。
ruby 复制代码
dependencies:
  flutter:
    sdk: flutter

  http: ^1.4.0
  1. 在 common_network 的 lib 中添加 main.dart 作为 Configuration 运行的入口。
  1. 编写完组件代码后,在 common_network.dart 中添加 export 声明
Dart 复制代码
export 'src/CommonNetwork.dart';
  1. Run - Edit Configurations - Add New Configuration - Flutter, 新建 common_network 的 Configuration,点击 Run 编译 packge。

三、组件引用

  1. 在工程的 pubspec.yaml 中添加 common_network 依赖。
ruby 复制代码
dependencies:
  flutter:
    sdk: flutter
    
  cupertino_icons: ^1.0.8
  common_network:
    path: ./packges/common_network
  1. 在工程中引用 common_network,实现 API 的调用。
Dart 复制代码
import 'dart:convert';
import 'package:common_network/common_network.dart';

void main() {
  final url = Uri.parse('https://domain/path/getConfig.json');

  CommonNetwork.getInstance().post(url, {'key': 'value'}, (String? body, Object? error) {
    if (body != null) {
      print('body: ${jsonDecode(body)}');
    } else {
      print('error: $error');
    }
  });
}
相关推荐
灰灰勇闯IT1 天前
Flutter for OpenHarmony:自定义 Paint 绘图 —— 释放 Canvas 的创造力
flutter
2601_949833391 天前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
牛马1111 天前
Flutter OverlayEntry
flutter
2603_949462101 天前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
2601_949975791 天前
Flutter for OpenHarmony艺考真题题库+帮助中心实现
flutter
子春一1 天前
Flutter for OpenHarmony:构建一个 Flutter 井字棋游戏,深入解析状态驱动逻辑、胜利判定与极简交互设计
flutter·游戏·交互
雨季6661 天前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
ujainu1 天前
Flutter + OpenHarmony 游戏开发进阶:CustomPainter 手绘游戏世界——从球体到轨道
flutter·游戏·信息可视化·openharmony
雨季6661 天前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
kirk_wang1 天前
Flutter艺术探索-Flutter相机与相册:camera库与image_picker集成
flutter·移动开发·flutter教程·移动开发教程