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');
    }
  });
}
相关推荐
LinXunFeng1 天前
Flutter 拖拉对比组件,换装图片前后对比必备
前端·flutter·开源
2501_919749031 天前
配置flutter鸿蒙的环境和创建并运行第一个flutter鸿蒙项目【精心制作】
flutter·华为·harmonyos
YUFENGSHI.LJ1 天前
Flutter 如何使用fvm进行多项目sdk管理
flutter
开心-开心急了1 天前
关于Flutter与Qt for python 的一些技术、开源、商用等问题
开发语言·python·qt·flutter
猫林老师2 天前
Flutter for HarmonyOS开发指南(四):国际化与本地化深度实践
flutter·华为·harmonyos
猫林老师2 天前
Flutter for HarmonyOS 开发指南(一):环境搭建与项目创建
flutter·华为·harmonyos
sunly_2 天前
Flutter:视频预览功能
javascript·flutter·音视频
勤劳打代码3 天前
条分缕析 —— 通过 Demo 深入浅出 Provider 原理
flutter·面试·dart
2501_915918413 天前
Flutter 加固方案对比与实战,多工具组合的跨平台安全体系(Flutter App 加固/IPA 成品混淆/Ipa Guard CLI/自动化安全流程)
安全·flutter·ios·小程序·uni-app·自动化·iphone
Bryce李小白3 天前
Flutter中mixing的原理及应用场景
flutter