【鸿蒙-flutter】_flutter 鸿蒙

技术文档

1、环境搭建

环境搭建官方地址

文档地址文档 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

注意这里换成自己的路径

打包命令 flutter build hap --debug开始运行 flutter run创建项目 flutter create demo001 如果使用 flutter doctor 包含iOS Android ohos 的话，项目会包含这3个文件夹，鸿蒙项目用devEco打开ohos编辑证书可以运行，或在vscode运行

项目创建包含4个tab

运行flutter，在vsCode 直接运行 flutter run

2、鸿蒙项目引入flutter模块

创建 flutter 模块

在鸿蒙项目文件夹中创建flutter module

# 为方便代码管理，将flutter代码放到工程目录内统一管理cd HarmonyProject# 1.以module形式集成到项目，创建flutter_moduleflutter create -t module my_flutter_module# 2.构建har文件,注意，这里需要限制性一下flutter的构建，否则是没有har文件的cd flutter_moduleflutter build har --release

引用源码

修改鸿蒙工程根目录下的oh-package.json5文件并添加对应的依赖

\"dependencies\":{ \"@ohos/flutter_ohos\": \"file:./my_flutter_module/.ohos/har/flutter.har\", \"@ohos/flutter_module\": \"./my_flutter_module/.ohos/flutter_module\"}

修改项目工程下的build-profile.json5文件，添加一个新的module

// 以下为新增内容{ \"name\": \"flutter_module\", \"srcPath\": \"./my_flutter_module/.ohos/flutter_module\", \"targets\": [ { \"name\": \"default\", \"applyToProducts\": [ \"default\" ] } ]}

在测试发版的时候先将 flutter 模块打成 har 包，复制到鸿蒙项目中，直接引用 har 文件

# 2.构建har文件cd my_flutter_moduleflutter build har --release

3、flutter vscode环境搭建+vscode插件推荐

VSCode安装

直接到官网下载最新版安装包：https://code.visualstudio.com/，下载完成后，点击安装包，然后一直下一步安装即可。安装完成后，我们先安装一些基础插件。

VSCode插件安装

中文插件

如果你喜欢使用中文环境，在搜索框输入chinese，中文插件就会跳出，点击安装即可。安装完成后你的VSCode界面就会变成中文。

Code Runner插件

Code Runner是一个很实用的插件，安装之后可以在右上角出现一个运行按钮，直接点击就可以运行你的代码了，支持多种编程语言。

Material Icon Theme插件

主题图标库，为你的项目文件添加美观的图标，让项目结构更直观。

Bracket Pair Colorizer插件

给匹配的括号上色，提高代码可读性。注意：此功能现已内置于VS Code中。

Color Highlight插件

这个插件用于给代码中的颜色值进行高亮展示，方便UI开发。

小霸王插件

一个有趣的插件，让你在写代码的间隙可以玩经典游戏放松一下。

Flutter开发必备插件

Flutter插件

Flutter开发的基本插件，直接搜索flutter安装第一个即可。

Dart插件

由于Flutter是基于Dart语言的，所以Dart插件也是必须的。

Flutter Widget Snippets插件

提供Widget代码片段快捷生成功能，比如输入fstful快捷键就可以生成StatefulWidget的代码模板。

Awesome Flutter Snippets插件

Flutter开发最常用的扩展之一，集成了Flutter常用类和方法，可以快速生成各种Widget代码。

Image Preview插件

鼠标悬浮在图片资源链接上会显示预览图，方便UI开发。

Error Lens插件

错误高亮显示，错误提示会直接显示在代码后面，提高调试效率。

iOS开发辅助工具

在Flutter开发iOS应用时，Appuploader是一个很实用的工具。它可以帮助开发者快速完成iOS应用的打包、上传和发布流程，简化了繁琐的证书管理和上传步骤。与VSCode配合使用，可以大大提高Flutter应用的开发效率。
————————————————

4、flutter常用第三方库

第三方库地址：pub.dev

1. 屏幕适配

flutter_screenutil:
flutter 屏幕适配方案，用于调整屏幕和字体大小的flutter插件，让你的UI在不同尺寸的屏幕上都能显示合理的布局

// 用法示例：// 初始化方式：ScreenUtilInit( // 填入设计稿中的尺寸 designSize: const Size(960, 540), builder: (context, widget) { return const HomePage(); },)// 如何适配尺寸：使用.w、.h 标识宽高即可Container( width: 50.w, height:200.h)

2. 路由

fluro: 组件化开发中，路由是必不可少的成员之一，用于模块间依赖解耦。fluro 是我们早期使用的一个路由库，使用方式简单，因为它本身不支持路由返回 widget，后期我们自己内部封装了一个库替代。

/// Push a route with custom RouteSettings if you don\'t want to use path paramsFluroRouter.appRouter.navigateTo( context, \'home\', routeSettings: RouteSettings( arguments: MyArgumentsDataClass(\'foo!\'), ),);/// Extract the arguments using [BuildContext.settings.arguments] or [BuildContext.arguments] for shortvar homeHandler = Handler( handlerFunc: (context, params) { final args = context.settings.arguments as MyArgumentsDataClass; return HomeComponent(args); },);

3. 网络请求

dio: 一个强大的 HTTP 网络请求库，支持全局配置、Restful API、FormData、拦截器、请求取消、Cookie 管理、文件上传/下载、超时、自定义适配器、转换器等。

// 用法示例：final response = await dio.post(\'/test\', data: { \'id\': 12, \'name\': \'dio\'});

4. 权限申请
permission_handler: 封装有 Android、iOS 应用权限操作申请，使用方式简洁。

// 用法示例：

await Permission.camera  .onDeniedCallback(() {       // Your code  })  .onGrantedCallback(() {       // Your code  })  .onPermanentlyDeniedCallback(() {       // Your code  })  .onRestrictedCallback(() {       // Your code  })  .onLimitedCallback(() {       // Your code  })  .onProvisionalCallback(() {       // Your code  })  .request();

5. 状态管理
状态管理，它可以轻松地将展示层代码与业务逻辑分开，构建数据驱动的开发模式。推荐自己在用的两个状态管理库：

flutter_bloc: 个人认为链路最简洁的状态管理库，内部实现原理初学者也能看懂。

BlocBuilder(  buildWhen: (previousState, state) {       // return true/false to determine whether or not    // to rebuild the widget with state  },  builder: (context, state) {       // return widget here based on BlocA\'s state  })

flutter_riverpod: 官方大力推荐的状态管理库，响应式缓存和数据板顶框架。

// 数据源@riverpodFuture boredSuggestion(BoredSuggestionRef ref) async {     final response = await http.get(    Uri.https(\'https://boredapi.com/api/activity\'),  );  final json = jsonDecode(response.body);  return json[\'activity\']! as String;}// UI层监听数据源变动class Home extends ConsumerWidget {     @override  Widget build(BuildContext context, WidgetRef ref) {       final boredSuggestion = ref.watch(boredSuggestionProvider);    // Perform a switch-case on the result to handle loading/error states    return boredSuggestion.when(      loading: () => Text(\'loading\'),      error: (error, stackTrace) => Text(\'error: $error\'),      data: (data) => Text(data),    );  }}

6. 嵌套地狱（ widget ）
styled_widget: 得益于 Dart2.7.0 后支持 extension 语法，该工具库用于改善 widget 的嵌套地狱问题，提高可阅读性。

// 干掉嵌套后，代码可以这样优雅Icon(OMIcons.home, color: Colors.white)  .padding(all: 10)  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)  .padding(all: 15)  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)  .padding(all: 20)  .card(    elevation: 10,    shape: RoundedRectangleBorder(      borderRadius: BorderRadius.circular(20),    ),  )  .alignment(Alignment.center)  .backgroundColor(Color(0xffEBECF1));

7. 实时崩溃上报
firebase_crashlytics: firebase 全家桶之一，该库用于实时上报崩溃日志，适用于 Android、iOS 平台。

具体集成方式请查阅详情页。

UI 交互

1. 图片加载（缓存）
cached_network_image: 提供缓存能力的图片显示库。

// 用法示例：CachedNetworkImage(        imageUrl: \"http://via.placeholder.com/350x150\",        placeholder: (context, url) => CircularProgressIndicator(),        errorWidget: (context, url, error) => Icon(Icons.error),)

2. 上拉下拉（刷新）

关于列表的上拉加载更多，下拉刷新，我们在实战中用过两个三方库，分别是：pull_to_refresh和easy_refresh

// 用法示例：EasyRefresh(    header: Header(      position: IndicatorPosition.locator,    ),    footer: Footer(      position: IndicatorPosition.locator,    ),    onRefresh: () async {         ....    },    onLoad: () async {         ....      return IndicatorResult.noMore;    },    child: CustomScrollView(      slivers: [        SliverAppBar(),        const HeaderLocator.sliver(),

3、瀑布流

flutter_staggered_grid_view: ^0.6.2 #flutter瀑布流

六种创建方式和属性

StaggeredGridView.count和StaggeredGridView.extent，前者创建了一个纵轴方向固定Tile个数的布局，后者只是在纵轴方法指定了一个Tile个数的最大值，这两种都是适合子Widget个数比较少的情况，都是List来设置
StaggeredGridView.countBuilder和StaggeredGridView.extentBuild，这两个跟上面的含义差不多，区别在于适合子Widget数量比较多的需要动态创建的情况
更高级的还有StaggeredGridView.builder和StaggeredGridView.custom，区别在于创建的方式不同，而且也更加灵活
StaggeredTile.count：固定纵轴和主轴上的数量
StaggeredTile.extent：纵轴上的数量和主轴上的最大范围
StaggeredTile.fit：纵轴上的数量
StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果

// 瀑布流Container( width: 375 - 18, child: MasonryGridView.count( physics: NeverScrollableScrollPhysics(), // 禁止滑动 crossAxisCount: 2, //列 mainAxisSpacing: 7, //高度间距 crossAxisSpacing: 7, //宽度间距 itemCount: widget.list?.length ?? 0, shrinkWrap: true, //收缩自适应 // physics: const NeverScrollableScrollPhysics(), //禁止左右滑动 itemBuilder: (context, index) {// 返回一个组件 return card( widget.list?[index] ?? Sale(), isFloorPlanMode: isFloorPlanMode); },))

class card extends StatelessWidget { final Sale sale; final bool isFloorPlanMode; const card(this.sale, {super.key, required this.isFloorPlanMode}); String parseSubTitle() { List strArr = []; if (sale.buildarea != null) { strArr.add(sale.buildarea ?? \'\'); } if (sale.heading != null) { strArr.add(sale.heading ?? \'\'); } return strArr.join(\' | \'); } @override Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Container( decoration: const BoxDecoration( color: Color(0xFFF8FAFF), // 设置背景颜色 // borderRadius: BorderRadius.circular(8.0), // 设置边框圆角 // border: Border.all( // color: const Color(0xFFDFE8FD), // 设置边框颜色 // width: 0.5, // 设置边框宽度 // ), ), child: Column( children: [// ...具体代码 ],  ), ), ], ), ), ); }}

其他第三方库

屏幕适配flutter_screenutil加载 svg flutter_svg状态管理 flutter_bloc（bloc、equatable）、provider视频播放器chewie图片缓存cached_network_image网络请求 dio设备信息查询device_info_plus文件路径 path_provider包信息 package_info_plus简单数据存储shared_preferences、encrypted_shared_preferences（加密）toast fluttertoast图片选择器image_picker文件选择器 file_pickerjson 动画lottielog 日志logger下拉刷新上拉加载pull_to_refreshwebview webview_flutter_plus系统设置app_settings网络状态connectivity_plus代理 http_proxy路由 go_router、fluro图片压缩 flutter_image_compress骨架动画 skeletonizer代码自动生成build、build_config、source_genin app webview flutter_inappwebview权限管理 permission_handler与native相互通讯 pigeon分享 share_plusuuid uuid打开第三方应用 url_launchersplash flutter_native_splash图表 fl_chart二维码 mobile_scanner加密 crypto

5、请求的数据转模型

转换网址：网址一，网址二

1、在线生成

https://javiercbk.github.io/json_to_dart （推荐）

https://autocode.icu/jsontodart

（备用）

2、get_cli 生成

get generate model on models from \"https://xiaomi.itying.com/api/focus\"

3、使用第三方库生成

https://doc.flutterchina.club/json/

// 使用示例 TopicsaleModel? topModel; loadTopData() async { final res = await HttpUtil().post(\'/appapi/v2/exchange/topicsale\', data: {\"cityid\": \"1\", \"v\": \"2\", \"request_ts\": \"1752202247\"}); topModel = TopicsaleModel.fromJson(res); }

注意转换后如果是其他类型要转换比如Int: status;status = int.parse(json[\'status\']);

【鸿蒙-flutter】_flutter 鸿蒙

1、环境搭建

2、鸿蒙项目引入flutter模块

3、flutter vscode环境搭建+vscode插件推荐

VSCode插件安装

中文插件

Code Runner插件

Material Icon Theme插件

Bracket Pair Colorizer插件

Color Highlight插件

小霸王插件

Flutter插件

Dart插件

Flutter Widget Snippets插件

Awesome Flutter Snippets插件

Image Preview插件

Error Lens插件

iOS开发辅助工具

4、flutter常用第三方库

1. 屏幕适配

2. 路由

3. 网络请求

4. 权限申请
permission_handler: 封装有 Android、iOS 应用权限操作申请，使用方式简洁。

5. 状态管理
状态管理，它可以轻松地将展示层代码与业务逻辑分开，构建数据驱动的开发模式。推荐自己在用的两个状态管理库：

6. 嵌套地狱（ widget ）
styled_widget: 得益于 Dart2.7.0 后支持 extension 语法，该工具库用于改善 widget 的嵌套地狱问题，提高可阅读性。

7. 实时崩溃上报
firebase_crashlytics: firebase 全家桶之一，该库用于实时上报崩溃日志，适用于 Android、iOS 平台。

UI 交互

1. 图片加载（缓存）
cached_network_image: 提供缓存能力的图片显示库。

2. 上拉下拉（刷新）

3、瀑布流

其他第三方库

5、请求的数据转模型

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

【鸿蒙-flutter】_flutter 鸿蒙

1、环境搭建

2、鸿蒙项目引入flutter模块

3、flutter vscode环境搭建+vscode插件推荐

VSCode插件安装

中文插件

Code Runner插件

Material Icon Theme插件

Bracket Pair Colorizer插件

Color Highlight插件

小霸王插件

Flutter插件

Dart插件

Flutter Widget Snippets插件

Awesome Flutter Snippets插件

Image Preview插件

Error Lens插件

iOS开发辅助工具

4、flutter常用第三方库

1. 屏幕适配

2. 路由

3. 网络请求

4. 权限申请 permission_handler: 封装有 Android、iOS 应用权限操作申请，使用方式简洁。

5. 状态管理 状态管理，它可以轻松地将展示层代码与业务逻辑分开，构建数据驱动的开发模式。推荐自己在用的两个状态管理库：

6. 嵌套地狱（ widget ） styled_widget: 得益于 Dart2.7.0 后支持 extension 语法，该工具库用于改善 widget 的嵌套地狱问题，提高可阅读性。

7. 实时崩溃上报 firebase_crashlytics: firebase 全家桶之一，该库用于实时上报崩溃日志，适用于 Android、iOS 平台。

UI 交互

1. 图片加载（缓存） cached_network_image: 提供缓存能力的图片显示库。

2. 上拉下拉（刷新）

3、瀑布流

其他第三方库

5、请求的数据转模型

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

4. 权限申请
permission_handler: 封装有 Android、iOS 应用权限操作申请，使用方式简洁。

5. 状态管理
状态管理，它可以轻松地将展示层代码与业务逻辑分开，构建数据驱动的开发模式。推荐自己在用的两个状态管理库：

6. 嵌套地狱（ widget ）
styled_widget: 得益于 Dart2.7.0 后支持 extension 语法，该工具库用于改善 widget 的嵌套地狱问题，提高可阅读性。

7. 实时崩溃上报
firebase_crashlytics: firebase 全家桶之一，该库用于实时上报崩溃日志，适用于 Android、iOS 平台。

1. 图片加载（缓存）
cached_network_image: 提供缓存能力的图片显示库。