Flutter尝鲜：跨平台移动应用开发

开始以前

本人使用Flutter开发的一个图文App《每日图文》，能够同时运行在Android和iOS上，欢迎体验，喜欢的话还不吝Star一下。

叮叮叮～ 传送门

Flutter为什么物？

随着移动App开发成本愈来愈高，近几年，移动跨平台开发的呼声层出不穷，如FaceBook的推出React-Native，大受欢迎，但其性能并不如人意。

2018年2月27日世界移动大会上，谷歌发布一个跨平台开发框架，名曰Flutter，用于构建高性能的原生Android和iOS两大平台的App。

目前还处于测试版本阶段：Beta 3。

Flutter编程语言

Flutter使用的编程语言是Dart，Dart是一门动态语言，几年前扬言要替换JavaScript地位，结果可想而知。

想必仍是不少人都没据说过这门语言吧，原谅我也没听过。没想到现在Dart以这样的形式再次出如今开发者面前。

Dart虽然是一门动态语言，可是像极了Java，做为一名Android开发者，几乎能够无缝切换，跟Kotlin也有几分类似。相比Java，Dart更为简洁。

具体能够到Dart语言中文社区了解学习。

Flutter特色

• 支持热加载，运行以后，修改代码无需从新安装和启动，提高开发调试效率
• 支持数据状态绑定，修改数据后自动刷新页面
• 全部的UI都是Widget，包括页面

Flutter环境配置

首先clone Flutter的repo

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户须要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户须要设置
export PATH=`pwd`/flutter/bin:$PATH
复制代码

而后检查是否须要安装其它依赖，根据提示来安装其它的依赖

flutter doctor
复制代码

若是是Mac的话，须要配置Flutter全局环境变量，在命令行输入：

$HOME/.bash_profile
复制代码

在.bash_profile文件添加如下环境变量：

其中**[PATH_TO_FLUTTER_GIT_DIRECTORY]**是上面clone的Flutter Repo的本地路径

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户须要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户须要设置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
复制代码

最后运行来生效当前命令行窗口：

source $HOME/.bash_profile
复制代码

更多平台配置可到【Flutter中文网】了解

Flutter开发工具配置

Flutter App可使用VS Code、Android Studio、IntelliJ进行开发。我直接用的Android Studio。

开始以前，你须要安装两个插件：

• Flutter插件： 支持Flutter开发工做流 (运行、调试、热重载等).
• Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).

若是在AS中没法在线安装，能够到如下连接中下载离线安装：

• Flutter插件下载
• Dart插件下载

注意下载的插件版本必定要和Android Studio JRE版本对应上，能够在Android Studio -> About Android Studio中查看版本。

模拟器配置

Android Studio支持Android模拟器和iPhone模拟器预览，具体安装参见Flutter中文网，这里再也不赘述。

新建Flutter App工程

安装了以上两个插件后，就能够在Android Studio中新建Flutter工程了，按照提示新建便可。

工程目录以下：

能够看到，工程目录结构主要分为3部分，分别是：

• android 存放Android相关的东西，如App图标
• ios 存放iOS相关的东西，如App图标
• lib 存放Flutter源码

重点来看Flutter的入口：lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}
复制代码

整个App的入口在void main()方法中。接下来，就来理清一下这个简单的代码。

Flutter页面架构

App开发最重要的就是UI框架，Flutter从新定制一套本身的UI框架，在底层使用了Skia进行渲染。

在Flutter中，一切皆是Widget，页面是Widget，普通的控件也是Widget。

UI布局和控件

从main.dart中能够看到，Flutter的布局是一层一层嵌套造成的。

• 第一层是Scaffold，一个实现了Material design的布局控件，包含了一个AppBar和一个body，分别对应标题栏和页面。

• 第二层body是一个Center布局控件，该布局用于使其子布局即child，在父布局中居中显示

• 最后的子布局是一个Text控件。

整个布局就是在页面的中间显示了Hello World。

页面控件：StatelessWidget 和 StatefulWidget

MyApp继承的StatelessWidget，就是其中一个页面相关的Widget，这个窗口的特色是静态，页面中的数据一旦渲染后，就不能在更改，通常用于显示静态页面。

另外一个StatefulWidget，则是能够改变状态的Widget，页面的显示随着状态改变而改变。经过setState方法能够很是方便的修改页面状态，与如今web动态绑定框架是相似的。

一个StatefulWidget页面看起来是这样的：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

复制代码

能够看到，StatefulWidget的业务逻辑基本上都在_MyHomePageState中，这个类继承了State。

当点击了FloatingActionButton时，就会调用_incrementCounter()方法进行setState()，页面就会跟着改变了。

注：Dart使用下划线_表示私有，如上面的_count和_incrementCounter()

因为Flutter的布局模式，当页面比较复杂时，整个布局会变得很是复杂，可读性也大大下降了，修改起来很是麻烦。

另外，Flutter为了布局灵活性，定义了太多的布局控件，几十个布局看得眼花缭乱，历来没见过这么多布局的框架。

Flutter插件管理

Flutter使用pubspec.yaml管理插件库，具体以下：

name: daily
description: A application to look up photo and article

#依赖插件配置
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  #本地资源配置
  assets:
    - images/ic-pic-loading.png
    - images/ic-pic-article.gif
复制代码

Run App

经过Android Studio就能够直接在模拟器上安装App了，固然，前提是你要先配置好模拟器。

若是修改了代码，就能够直接经过热加载，直接显示修改的内容，无需从新安装打开，大大节省了调试时间。

总结

• Flutter的对于熟悉Java或者Android开发的人来讲，仍是比较友好的，能够比较快的熟悉和掌握基本的开发工具和开发理念；
• Flutter App的性能确实仍是不错的，整个的体验与原生App基本差很少；
• 热加载很是好用，能够节省很多时间；
• 支持数据和状态自动绑定，经过setState能够很是方便的修改页面状态；
• Flutter 布局嵌套很是坑爹，布局复杂将会很是痛苦；
• 基本上实现Android和iOS一套代码通用，开发效率大大提升了。
• 仍然有许多须要改进的地方，许多特性支持也不太好，如webview这些须要使用第三方插件，或本身定制。

如今Flutter仍然为Beta版本，但愿后面能够带来更多惊喜和更好的体验吧。