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');
    }
  });
}
相关推荐
笨小孩78710 分钟前
Flutter深度解析:从原理到实战的跨平台开发指南
flutter
飛67935 分钟前
Flutter 状态管理深度实战:从零封装轻量级响应式状态管理器,告别 Provider/Bloc 的臃肿与复杂
前端·javascript·flutter
tangweiguo0305198741 分钟前
Flutter iOS 风格弹框组件封装
flutter
LYFlied1 小时前
浅谈跨端开发:大前端时代的融合之道
前端·flutter·react native·webview·大前端·跨端开发·hybrid
500841 小时前
鸿蒙 Flutter 分布式数据同步:DistributedData 实时协同实战
分布式·flutter·华为·electron·开源·wpf·音视频
song5011 小时前
鸿蒙 Flutter 图像编辑:原生图像处理与滤镜开发
图像处理·人工智能·分布式·flutter·华为·交互
●VON2 小时前
从零构建可扩展 Flutter 应用:v1.0 → v2.0 全代码详解 -《已适配开源鸿蒙》
学习·flutter·开源·openharmony·开源鸿蒙
心随雨下2 小时前
Flutter自适应布局部件(SafeArea 和 MediaQuery)总结
flutter·typescript
500842 小时前
鸿蒙 Flutter 超级终端适配:多设备流转与状态无缝迁移
java·人工智能·flutter·华为·性能优化·wpf
帅气马战的账号12 小时前
OpenHarmony 与 Flutter 深度集成:分布式能力与跨端 UI 实战进阶
flutter