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');
    }
  });
}
相关推荐
用户66116655296527 分钟前
Futter3 仿抖音我的页面or用户详情页
flutter
Haha_bj23 分钟前
Flutter ——device_info_plus详解
android·flutter·ios
前端小伙计27 分钟前
Android/Flutter 项目统一构建配置最佳实践
android·flutter
微祎_1 小时前
Flutter for OpenHarmony:形状拼图游戏开发全指南 - 基于Flutter CustomPaint的可拖拽矢量拼图实现与设计理念
flutter
不爱吃糖的程序媛2 小时前
解锁Flutter鸿蒙开发新姿势——flutter_ohfeatures插件集实战指南
flutter
一只大侠的侠3 小时前
React Native开源鸿蒙跨平台训练营 Day16自定义 useForm 高性能验证
flutter·开源·harmonyos
子春一3 小时前
Flutter for OpenHarmony:绿氧 - 基于Flutter的呼吸训练应用开发实践与身心交互设计
flutter·交互
ujainu3 小时前
告别杂乱!Flutter + OpenHarmony 鸿蒙记事本的标签与分类管理(三)
android·flutter·openharmony
ZH15455891314 小时前
Flutter for OpenHarmony Python学习助手实战:API接口开发的实现
python·学习·flutter
一只大侠的侠4 小时前
Flutter开源鸿蒙跨平台训练营 Day11从零开发商品详情页面
flutter·开源·harmonyos