首页 > 其他分享 >Flutter实战篇

Flutter实战篇

时间：2024-08-23 18:52:22浏览次数：13  
标签：原生 25 实战篇 插件 flutter 组件 Flutter

第四章Flutter实战

4.1 Fluter APP 代码结构

1.png

  • ''lib” Dart代码目录
    2.png

  • “ios”、“android”是两个平台相关代码、配置目录

  • pubspec.yaml是依赖的组件库配置如：

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  http: 0.13.3
  dio: ^4.0.0  #大于等于4.0.0小于5.0.0
  image_picker: ^0.8.3+2

也可以配置本地图片，在工程目录下创建个images文件,将所需图片导入到该目录，并配置如下：

  # To add assets to your application, add an assets section, like this:
  assets:
     - images/

注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格

4.2 代码实战

模拟微信APP，项目名称WeChatDemo。

  • 项目入口：main
void main() {
  runApp(MyApp());

}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        highlightColor: Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: Color.fromRGBO(1, 0, 0, 0.0),
        cardColor: Color.fromRGBO(1, 1, 1, 0.65),//有透明层叠视图的设置
        primarySwatch: Colors.blue,
        appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black))
      ),
      home: RootPage(),
    );
  }
}
  • 主要模块：微信、通讯录、发现、我
 class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  List <Widget> _pages = [ChatPage(),FriendsPage(),DiscoverPage(),MinePage()];
  final PageController _controller = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView( //通过pageView 来保持状态
        physics: NeverScrollableScrollPhysics(), //不允许滚动
        children: _pages,
        controller: _controller,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState(() {
            _currentIndex  = index;
          });
          _controller.jumpToPage(index);
        },
        selectedFontSize: 12,
        unselectedFontSize: 12,
        currentIndex: _currentIndex,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_chat.png',height: 25,width: 25),
              activeIcon: Image.asset('images/tabbar_chat_hl.png',height: 25,width: 25,),
              label: '微信'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_friends.png',height: 25,width: 25,),
              activeIcon: Image.asset('images/tabbar_friends_hl.png',height: 25,width: 25,),
              label: '通讯录'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_discover.png',height: 25,width: 25,),
              activeIcon: Image.asset('images/tabbar_discover_hl.png',height: 25,width: 25,),
              label: '发现'
          ),
          BottomNavigationBarItem(
              icon: Image.asset('images/tabbar_mine.png',height: 25,width: 25,),
              activeIcon: Image.asset('images/tabbar_mine_hl.png',height: 25,width: 25,),
              label: '我'
          ),
        ],
      ),
    );
  }
}

详细代码请参考项目WechatDemo

4.2.1 AutomaticKeepAliveClientMixin 混入

state 混入 AutomaticKeepAliveClientMixin，保持Tabbar 切换时state不被重新初始化

  • state 混入 AutomaticKeepAliveClientMixin
class _ChatPageState extends State<ChatPage>
    with AutomaticKeepAliveClientMixin
  • state 添加成员属性
  @override
  bool get wantKeepAlive => true;
  • 在 build 方法中添加
    super.build(context);
4.2.2 混合开发
  • Flutter调原生功能，如我的页面，更换头像需要调用系统相册，有两种实现方式
    1、MethodChannel 通道
    类似于通知，通过发送消息，监听消息回调实现与原生通讯
//第一步：Flutter端创建通道,传入唯一标识
 MethodChannel _methodChannel = MethodChannel('mine_page');
 
//第二步：Flutter端发送消息
_methodChannel.invokeListMethod('picture'); //发送了一条要更换图片的消息

//第三步：原生注册‘mine_page’通道，并监听消息发送
FlutterViewController *vc = (FlutterViewController *)self.window.rootViewController;
FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"mine_page" binaryMessenger:vc];
self.methodChannel = methodChannel;
//监听flutter消息
[methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
     if ([call.method isEqualToString:@"picture"]) {
           UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
           imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
           imagePicker.delegate = self;
           imagePicker.modalPresentationStyle = UIModalPresentationFullScreen;
           [vc presentViewController:imagePicker animated:YES completion:nil];
      }
 }];

//第四步：原生发送拿到相册消息
[self.methodChannel invokeMethod:@"imagePath" arguments:imagePath];

//第五步：dart监听回调，并更新状态
 _methodChannel.setMethodCallHandler((call) {
     if(call.method == 'imagePath') {
         String imagePath = call.arguments.toString().substring(7); //截取前面7个字符，拿到的参数带有file://
         setState(() {
           _avatarFile = File(imagePath);
         });
      }
    return Future(() => null);
 });

注：原生与Flutter交互的过程中必须确保是同一个通道，唯一性

2、ImagePicker，三方插件无需原生写多余代码

  void _imagePick() async {
    XFile? file =  await ImagePicker().pickImage(source: ImageSource.gallery); //相册
    if(file != null) {
      setState(() {
        _avatarFile = File(file.path);
      });
    }
  }

  • 原生项目中使用Flutter页面
    1、创建Flutter 组件，在组件项目中写dart代码
    3.png

    • Flutter App: 创建一个完整的flutter项目，里面包含安卓和iOS项目
    • Flutter Module： 创建Flutter组件时使用，混编到已有的安卓/iOS工程
    • Flutter Plugin：就是Plugin的方式进行开发，比如一些百度地图，flutter不提供，通过自建Plugin，通过Plugin中的android和ios原生项目，集成原生百度功能，通过plugin中的lib中的方法来进行flutter调用百度的相关方法
    • Flutter Package：纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget

    2、通过cocoapods 导入到原生项目中，如：本地有个flutter_moudle组件，原生项目中需要植入Flutter页面，podfile文件配置如下：
    4.png

    3、导入Flutter库，并使用
    注意：flutter页面和原生页面频繁切换会导致内存泄漏

4.2.3 安装包结构

用Xcode打开项目，选择真机编译，选择Products ->Runner.app -> 右键Show in Finder右键显示包内容，可以看到编译后结构：可执行文件、资源文件、签名、Frameworks。重点关注下Frameworks
5.png

  • App.framewok： dart代码编译后的产物，App可执行文件（二进制机器代码）
  • Flutter.framewok： 就是Flutter SDK源码文件，我们看到可执行文件大小是65.7M，而Flutter SDK目录下的同名framework也是65.7M，很好的证明了APP在打包过程中会将Flutter SDK 引擎导入到安装包中，这也是Flutter App安装包比原生项目体积大的原因
    6.png

路径：/flutter/bin/cache/artifacts/engine/ios/Flutter.xcframework/ios-armv7_arm64/Flutter.framework

4.3 Flutter 插件开发（plugin ）

  • 1、Flutter插件介绍
    一种专用的Dart包，其中包含用Dart代码编写的API，以及针对Android（使用Java或Kotlin）和针对iOS（使用OC或Swift）平台的特定实现（另外也可以包含Native的组件代码），也就是说插件包括原生代码与Dart代码。插件开发完成后，将上传到dart插件管理服务仓库，类似于maven、pod库，然后在flutter开发过程中可以通过pubspec.yaml（dart包管理配置文件）来获取插件服务。

  • 2、为什么要开发Flutter插件
    首先，虽然Flutter的生态现在已经越来越完善了，但是相比于Android跟iOS原生的生态体系，还是远远不够。很多在Android跟iOS原生上有的很酷炫的库，在Flutter中还没有或者是并没有那么的完善。其次，想必大家在原生工程里都有一套用了多年的稳定基础组件，包括网络组件、数据组件等，要重新在Flutter中用dart来搭建一套，时间成本、风险成本、组件兼容性等都是不可控的。所以，最理想的方式就是Flutter的基础组件可以对我们现有原生的组件做一层包装，然后提供接口给Flutter模块进行调用，这样一来什么时间、风险、兼容性都不是问题。我们只要维护一套原生组件就好，Flutter组件只是一层包装，并不在意内部如何去实现。那么Flutter跟原生怎么进行交互呢？

  • 3、Flutter如何与原生交互
    1）MethodChannel 通道， 具体使用4.2.2混合开发已介绍。Flutter与原生的交互模型，类似于一种C-S模型。其中Flutter为Client层，原生为Server层，两者通过MethodChannel进行消息通信，原生端向Flutter提供已有的Native组件功能。

    2）究竟什么是MethodChannel
    Flutter定义了3种Channel模型，分别是： BasicMessageChannel：用于传递字符串和半结构化的信息；MethodChannel：用于传递方法调用（methodinvocation）EventChannel: 用于数据流（event streams）的通信。3种channel基本类似，这里以MethodChannel展开介绍
    3） MethodChannel有3个重要的成员变量：

- String name    
一个Channel对象通过name来进行唯一的标识，所以在Channel的命名上一定要独一无二，推荐采用组件名_Channel名 组合来进行命名

- BinaryMessenger messenger   
BinaryMessenger是Platform端与Flutter端通信的工具，其实是个中间信使，当我们初始化一个Channel，并向该Channel注册处理消息的Handler时，实际上会生成一个与之对应的BinaryMessageHandler，并以channel name为key，注册到BinaryMessenger中。当Flutter端发送消息到BinaryMessenger时，BinaryMessenger会根据其入参channel找到对应的BinaryMessageHandler，并交由其处理。BinaryMessenger维护了一个map

Binarymessenger在Android端是一个接口，其具体实现为FlutterNativeView。而其在iOS端是一个协议，名称为FlutterBinaryMessenger，FlutterViewController遵循了它。Binarymessenger只和BinaryMessageHandler打交道，而Channel和BinaryMessageHandler则是一一对应的。由于Channel从BinaryMessageHandler接收到的消息是二进制格式数据，无法直接使用，故Channel会将该二进制消息通过Codec（消息编解码器）解码为能识别的消息并传递给Handler进行处理。当Handler处理完消息之后，会通过回调函数返回result，并将result通过编解码器编码为二进制格式数据，通过BinaryMessenger返回。

- MethodCodec codec  
消息编解码器Codec主要用于将二进制格式的数据转化为Handler能够识别的数据，MethodCodec主要是对MethodCall中这个对象进行序列化与反序列化，MethodCall是Flutter向Native发起调用产生的对象，其中包含了方法名以及一个参数集合
  • 4、插件工程创建
    推荐通过命令行来创建，因为通过IDE来创建有时候会卡住，而且会比较慢
flutter create --org com.plug.jcfc.cn --template=plugin --platforms=android,ios -i objc -a java flutter_plug

  • 5、目录结构
    [图片上传失败…(image-236f71-1635245763669)]

  • ib dart模块

  • android android模块

  • ios iOS模块

  • example 示例测试工程可用于插件的调试

  • pubspec.yaml flutter项目的配置文件
    ….

    pubspec.yaml： dart生态下的包管理配置文件类似 Android中的gradle、iOS中的Podfile，在这里可以统一管理整个flutter工程的dart依赖包，以及管理整个插件的发布属性。

  • 6、原生端开发
    实现MethodCallHandler接口，注册MethodChannel对象，MethodChannel在创建时一定要保证name唯一
    将MethodHandler接口注册到MethodChannel中
    包装原生端组件，包括一些二方库、三方库，将包好的方法通过MethodCallHandler暴露给Flutter端

  • 7、Flutter端开发
    找到MethodChannel对象，通过唯一标识name，注意（name一定要与原生端注册的一致）
    定义dart方法，因为要保证方法的执行不产生阻塞，所以推荐用Future async await .相关的语法见dart语法
    调用methodChannel.invokeMothed()与原生进行通信

  • 8、插件测试
    在example/lib/main.dart下调用插件中的方法，然后直接通过命令将工程跑起来查看输出

fultter run

插件都还没有发布，为什么example工程可以直接引用？看一下example目录下的pubspec.yaml文件，里面有

dependencies:
  flutter:
    sdk: flutter

  flutter_plug:
    # When depending on this package from a real application you should use:
    #   flutter_plug: ^x.y.z
    # See https://dart.dev/tools/pub/dependencies#version-constraints
    # The example app is bundled with the plugin so we use a path dependency on
    # the parent directory to use the current plugin's version.
    path: ../ 相对路径

pubspec.yaml 不但可以引用服务器上的插件，也可以引用本地路径下的插件。如此我们可以在插件未发布的情况下，直接在本地的测试工程里对插件进行测试

  • 9、插件发布
  • 完善pubspec.yaml文件
name: 插件名称  
description: 插件描述  
version: 0.0.1 版本号  
homepage: 项目主页地址  
publish_to: 填写私有服务器的地址（如果是发布到flutter pub则不用填写，插件默认是上传到flutter pub）
  • 检查发布条件
flutter packages pub publish --dry-run  

--dry-run 参数表示本次执行会检查插件的配置信息是否有效，插件是否满足上传条件。如果成功的话并不会真正的将插件上传，而是会显示本次要发布插件的信息，并提示成功。一般在插件的正式发布前，建议先执行该命令，避免在上传过程中出现错误
  • 正式发布
发布至pub平台
flutter packages pub publish

4.3 Flutter 插件开发（Package）

纯Dart 语言，封装的有特定功能的Widget组件,创建和发布流程和plugin插件类似

参考资料
Flutter中文网
Dart和Flutter应用程序的官方软件包库
Dart语言中文网

标签：原生,25,实战篇,插件,flutter,组件,Flutter
From： https://blog.csdn.net/weixin_40035526/article/details/141468568

相关文章

  • Flutter 自定义日期范围选择组件，使用更加灵活，满足UI设计需要
    一、实现的效果图二、虽然Flutter也为我们提供了日期范围选择组件showDateRangePicker，但是毕竟系统的UI不符合我们的设计风格，所以被迫只能自己实现一个了系统样式三、日历整体实现逻辑其实也很简单，如下：首先获取每个月份具体有多少天int_getMonthDays(DateTimetim......
  • 第一个Flutter应用
    用VSCode创建的Flutter应用模板默认是一个简单的计数器示例。下面会仔细讲解一下这个计数器Demo的源码，让读者对Flutter应用程序结构有个基本了解，然后在随后的小节中将会基于此示例，一步一步添加一些新的功能来介绍Flutter应用的其他概念与技术。一、创建Flutter应用模......
  • 初识 Flutter
    一、Flutter简介Flutter是Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App，一套代码同时运行在iOS和Android平台。Flutter提供了丰富的组件、接口，开发者可以很快地为Flutter添加Native（即原生开发，指基于平台原生语言......
  • 搭建 Flutter 开发环境
    理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。不过，Flutter官方建议使用AndroidStudio和VSCode之一以获得更好的开发体验。这里选择使用VisualStudioCode作为编辑器，下面介绍其的安装。一、安装VSCode下载适用于Windows的VisualStudio......
  • flutter在本地化后启动时显示黑屏
    Flutter是一种跨平台的移动应用开发框架，可以同时在iOS和Android平台上构建高性能、美观的应用程序。当Flutter应用程序在本地化后启动时显示黑屏，可能是以下几个原因导致的：资源加载问题：在应用程序本地化后，可能存在资源文件加载失败的情况，导致应用程序无法正常显示。可以检查资源......
  • android开发通过wireshark实现flutter应用抓包
    android开发通过wireshark实现flutter应用抓包1.为什么要使用wireshark抓包1.有了上一篇Charles的抓包文章，为什么还写这篇抓包文章呢？单独论http请求抓包的话Charles比wireshark好用2.这是因为flutter应用使用的不是系统的证书，而是使用flutter框架自己的证书，这就导致了Char......
  • 【实战指南】使用 Redis 实现 Java 项目中的防重复提交功能：从原理到实战(实战篇)
    文章目录使用Redis实现Java项目中的防重复提交功能1.引言1.1为何需要防重复提交功能1.2重复提交导致的问题1.3引入Redis作为解决方案的一部分2.基础知识2.1Redis简介2.2Java环境搭建2.3环境配置3.理论基础3.1HTTP请求的特点3.2前端表单提交3.3后......
  • Flutter项目移动端SQLite升级指南：解决json_extract函数缺失问题
    引言在Flutter移动端项目中依赖于SQLite的高级功能（如json_extract），在低版本的Android系统上部署时，可能会遇到函数不支持的问题。本文将指导你如何通过升级项目中使用的SQLite版本来解决这一问题。前置条件Flutter项目使用sqflite:^2.3.3+1进行SQLite数据库操作。IMBoyA......
  • 「重构：改善既有代码的设计」实战篇
    背景在软件开发的世界里，代码重构是提升项目质量、适应业务变化的关键步骤。最近，我重新翻阅了《重构：改善既有代码的设计第二版》，这本书不仅重新点燃了我对重构的热情，还深化了我的理解：重构不仅仅是代码层面的整理，它更是一种软件开发的哲学，强调持续改进和适应变化的重要性。 书......
  • Android跨平台开发之Dart 3.5 与 Flutter 3.24：革新跨平台应用开发
    本文首发于公众号“AntDream”，欢迎微信搜索“AntDream”或扫描文章底部二维码关注，和我一起每天进步一点点Dart3.5与Flutter3.24：革新跨平台应用开发在软件开发领域，跨平台开发框架层出不穷，但鲜有能像Flutter这样在短时间内迅速崛起，获得广泛的认可和应用。随着Dart......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99