Flutter完整开发实战详解(3、打包与填坑篇)| 掘金技术征文

时间 2019-11-05

标签 flutter 完整开发实战详解打包技术征文繁體版

原文原文链接

做为系列文章的第三篇，继篇章一和篇章二以后，本篇将为你着重展现：Flutter开发过程的打包流程、APP包对比、细节技巧与问题处理。本篇主要描述的Flutter的打包、在开发过程当中遇到的各种问题与细节，算是对上两篇的补全。javascript

友情提示：本文全部代码均在 GSYGithubAppFlutter ，要不试试？(◐‿◑)。java

1、打包

首先咱们先看结果，以下表所示，是 Flutter 与 React Native 、IOS 与 Android 的纵向与横向对比 。android

项目	IOS	Android
GSYGithubAppFlutter
GSYGithubAppRN

从上表咱们能够看到：ios

Fluuter的 apk 会比 ipa 更小一些，这其中的一部分缘由是 Flutter 使用的 Skia 在Android 上是自带的。git
横向对比 React Native ，虽然项目不彻底同样，可是大部分功能一致的状况下， Flutter 的 Apk 确实更小一些。这里又有一个细节，rn 的 ipa 包体积小不少，这实际上是由于 javascriptcore 在 ios上是内置的缘由。github
对上述内容有兴趣的能够看看《移动端跨平台开发的深度解析》。web

一、Android打包

在Android的打包上，笔者基本没有遇到什么问题，在android/app/build.grade文件下，配置applicationId、versionCode、versionName 和签名信息，最后经过 flutter build app 便可完成编译。编程成功的包在 build/app/outputs/apk/release 下。编程

二、IOS打包与真机运行

在IOS的打包上，笔者却是经历了一波曲折，这里主要讲笔者遇到的问题。xcode

首先你须要一个 apple 开发者帐号，而后建立证书、建立AppId，建立配置文件、最后在info.plist文件下输入相关信息，更详细可看官方的《发布的IOS版APP》的教程。bash

但因为笔者项目中使用了第三方的插件包如 shared_preferences 等，在执行 Archive 的过程却一直出现以下问题：

在 `Archive` 时提示找不到
#import <connectivity/ConnectivityPlugin.h> ///file not found
#import <device_info/DeviceInfoPlugin.h>
#import <flutter_statusbar/FlutterStatusbarPlugin.h>
#import <flutter_webview_plugin/FlutterWebviewPlugin.h>
#import <fluttertoast/FluttertoastPlugin.h>
#import <get_version/GetVersionPlugin.h>
#import <package_info/PackageInfoPlugin.h>
#import <share/SharePlugin.h>
#import <shared_preferences/SharedPreferencesPlugin.h>
#import <sqflite/SqflitePlugin.h>
#import <url_launcher/UrlLauncherPlugin.h>
复制代码

经过 Android Studio 运行到 IOS 模拟器时没有任何问题，说明这不是第三方包问题。经过查找问题发现，在 IOS 执行 Archive 以前，须要执行 flutter build release，以下图在命令执行以后，Pod 的执行目录会发现改变，而且生成打包须要的文件。（ps 普通运行时自动又会修改回来）

可是实际在执行 flutter build release 后，问题依然存在，最终翻山越岭(╯‵□′)╯︵┻━┻，终于找到两个答案：

Issue#19241 下描述了相似问题，可是他们由于路径问题致使，通过尝试并不能解决。
Issue#18305 真实的解决了这个问题，竟然是由于 Pod 的工程没引入：

open ios/Runner.xcodeproj

I checked Runner/Pods is empty in Xcode sidebar.

drop Pods/Pods.xcodeproj into Runner/Pods.

"Valid architectures" to only "arm64" (I removed armv7 armv7s) 
复制代码

最后终于成功打包，心累啊(///▽///)。同时若是但愿直接在真机上调试 Flutter，能够参考 :《Flutter基础—开发环境与入门》下的 IOS 真机部分。

2、细节

这里主要讲一些小细节

一、AppBar

在 Flutter 中 AppBar 算是经常使用 Widget ，而 AppBar 可不只仅做为标题栏和使用，AppBar上的 leading 和 bottom 一样是有用的功能。

AppBar 的 bottom 默认支持 TabBar, 也就是常见的顶部 Tab 的效果，这实际上是由于TabBar 实现了 PreferredSizeWidget 的 preferredSize。因此只要你的控件实现了 preferredSize，就能够放到 AppBar 的 bottom 中使用。好比下图搜索栏，这是TabView下的页面又实用了AppBar。

leading ：一般是左侧按键，不设置时通常是 Drawer 的图标或者返回按钮。
flexibleSpace ：位于 bottom 和 leading 之间。

二、按键

Flutter 中的按键，如 FlatButton 默认是否有边距和最小大小的。因此若是你想要无 padding、margin、border 、默认大小 等的按键效果，其中一种方式以下：

///
new RawMaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        padding: padding ?? const EdgeInsets.all(0.0),
        constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
        child: child,
        onPressed: onPressed);
复制代码

若是在再上 Flex ，以下所示，一个可控的填充按键就出来了。

new RawMaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        padding: padding ?? const EdgeInsets.all(0.0),
        constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
        ///flex
        child: new Flex(
          mainAxisAlignment: mainAxisAlignment,
          direction: Axis.horizontal,
          children: <Widget>[],
        ),
        onPressed: onPressed);
复制代码

三、StatefulWidget 赋值

这里咱们以给 TextField 主动赋值为例，其实 Flutter 中，给有状态的 Widget 传递状态或者数据，通常都是经过各类 controller 。如 TextField 的主动赋值，以下代码所示：

final TextEditingController controller = new TextEditingController();

 @override
 void didChangeDependencies() {
    super.didChangeDependencies();
    ///经过给 controller 的 value 新建立一个 TextEditingValue
    controller.value = new TextEditingValue(text: "给输入框填入参数");
 }

 @override
  Widget build(BuildContext context) {
    return new TextField(
     ///controller
      controller: controller,
      onChanged: onChanged,
      obscureText: obscureText,
      decoration: new InputDecoration(
        hintText: hintText,
        icon: iconData == null ? null : new Icon(iconData),
      ),
    );
  }
复制代码

其实 TextEditingValue 是 ValueNotifier，其中 value 的 setter 方法被重载，一旦改变就会触发 notifyListeners 方法。而 TextEditingController 中，经过调用 addListener 就监听了数据的改变，从而让UI更新。

固然，赋值有更简单粗暴的作法是：传递一个对象 class A 对象，在控件内部使用对象 A.b 的变量绑定控件，外部经过 setState({ A.b = b2}) 更新。

四、GlobalKey

在Flutter中，要主动改变子控件的状态，还可使用 GlobalKey。好比你须要主动调用 RefreshIndicator 显示刷新状态，以下代码所示。

GlobalKey<RefreshIndicatorState> refreshIndicatorKey;
  
 showForRefresh() {
    ///显示刷新
    refreshIndicatorKey.currentState.show();
  }

  @override
  Widget build(BuildContext context) {
    refreshIndicatorKey =  new GlobalKey<RefreshIndicatorState>();
    return new RefreshIndicator(
      key: refreshIndicatorKey,
      onRefresh: onRefresh,
      child: new ListView.builder(
        ///·····
      ),
    );
  }
复制代码

五、Redux 与主题

使用 Redux 来作 Flutter 的全局 State 管理最合适不过，因为Redux内容较多，若是感兴趣的能够看看篇章二，这里主要经过 Redux 来实现实时切换主题的效果。

以下代码，经过 StoreProvider 加载了 store ，再经过 StoreBuilder 将 store 中的 themeData 绑定到 MaterialApp 的 theme 下，以后在其余 Widget 中经过 Theme.of(context) 调你须要的颜色，最终在任意位置调用 store.dispatch 就可实时修改主题，效果如后图所示。

class FlutterReduxApp extends StatelessWidget {
  final store = new Store<GSYState>(
    appReducer,
    initialState: new GSYState(
      themeData: new ThemeData(
        primarySwatch: GSYColors.primarySwatch,
      ),
    ),
  );

  FlutterReduxApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// 经过 StoreProvider 应用 store
    return new StoreProvider(
      store: store,
      ///经过 StoreBuilder 获取 themeData
      child: new StoreBuilder<GSYState>(builder: (context, store) {
        return new MaterialApp(
            theme: store.state.themeData,
            routes: {
              HomePage.sName: (context) {
                return HomePage();
              },
            });
      }),
    );
  }
}
复制代码

六、Hotload 与 Package

Flutter 在 Debug 和 Release 下分别是 JIT 和 AOT 模式，而在 DEBUG 下，是支持 Hotload 的，并且十分丝滑。可是须要注意的是：若是开发过程当中安装了新的第三方包，而新的第三方包若是包含了原生代码，须要中止后从新运行哦。

pubspec.yaml 文件下就是咱们的包依赖目录，其中 ^ 表明大于等于，通常状况下 upgrade 和 get 都能达到下载包的做用。可是：upgrade 会在包有更新的状况下，更新 pubspec.lock 文件下包的版本 。

3、问题处理

Waiting for another flutter command to release the startup lock ：若是遇到这个问题：

一、打开flutter的安装目录/bin/cache/ 
  二、删除lockfile文件 
  三、重启AndroidStudio
复制代码

dialog下的黄色线 yellow-lines-under-text-widgets-in-flutter：showDialog 中，默认是没使用 Scaffold ，这回致使文本有黄色溢出线提示，可使用 Material 包一层处理。
TabBar + TabView + KeepAlive 的问题能够经过 TabBar + PageView 解决，具体可见篇章二。