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');
    }
  });
}
相关推荐
kingbal1 小时前
Flutter:Flutter SDK版本管理工具FVM
android·flutter·ios·android-studio·window
风华圆舞1 小时前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
天天开发1 小时前
Flutter状态管理新宠:RiverPod全面解析与实战指南
android·flutter
「、皓子~11 小时前
海狸IM 2.0 正式发布:六端齐发,开源 IM 迈入新阶段
flutter·electron·开源软件·ai编程·交友·im
JIngles12315 小时前
flutter避免对widget图片作重复刷新(含实际图片发生变化或不发生变化)
flutter
雾沉川19 小时前
Flutter 入门开发环境完整搭建教程
学习·flutter
MemoriKu20 小时前
Flutter 本地 AI 相册工程收口:从屏幕常亮、标签体系到照片属性后台队列
大数据·人工智能·python·flutter·elasticsearch·搜索引擎·数据库架构
Prowler_92561 天前
创新项目实训博客(十一):大模型智能标题生成与多级降维兜底策略
人工智能·flutter·aigc
不良使1 天前
鸿蒙PC迁移_LocalSend 迁移到鸿蒙 PC:一次 Flutter + Rust + 三方库适配的完整记录
flutter·rust·harmonyos
恋猫de小郭1 天前
由于 iOS 26 的键盘变化,Flutter 又要重构键盘区域逻辑
android·前端·flutter