Google 跨平台方案 Flutter 从入门到实战-白红宇

本文由提供写作赞助

原作者：杨哲

版权声明：本文版权归微信公众号 玉刚说 所有，未经许可，不得以任何形式转载

前言

2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在 Android/IOS 两个平台开发高质量原生应用的全新移动UI框架。

热重载（Hot Reload），作为一个安卓开发者，能热重载真的太舒服了，利用Android Studio直接一个ctrl+s就可以保存并重载，模拟器立马就可以看见效果。

一切皆为Widget的理念，对于Flutter来说，手机应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。

借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。

这段介绍是直接抄下来的，虽然我并不知道什么叫可移植的GPU加速的渲染引擎，但是最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多,那么我们开始走进 Flutter 的世界吧。

本文章的结构如下：

如何搭建 Flutter 开发环境

Dart的优点和基本用法

如何使用平台特性API

除去UI部分，代码如何在 Android/IOS 复用

实现一个案例

Flutter进行开发 Android/IOS

tips：本文在苹果笔记上开发，因为需要调试 IOS 和 Android

这里我用 Android Studio 开发 Flutter ,下边我们来看一下开发步骤。

准备工作

安装Android Studio 中 Flutter 和 Dart 两个插件（设置中Plugin搜索即可）

官网下载 fluter sdk（tip：）

创建工程

安装Xcode ，启动一个IOS 模拟器

启动一个 Android 模拟器

我这里也是大概描述一下大概流程，为了节省篇幅，官网有更加详细的步骤：

我首先推荐官网：如果你想快速入门，这里有

Dart 语法

Dart 的优势

当时我学习 Dart 语言的时候，一直思考 Dart 有什么优势？只有 Google 这个亲爹的原因吗？我带着这个思考查了不少资料，发现 Dart 的优势有如下几点：

Dart 支持AOT编译和JIT编译两种方式

Dart 是单线程的，这意味着它根本不允许抢占

JIT编译

JIT编译在开发过程中使用，编译器速度特别快。然后，当一个应用程序准备发布时，它被AOT编译。因此，借助先进的工具和编译器，Dart具有两全其美的优势：极快的开发周期、快速的执行速度和极短启动时间。

我们讨论过一个有助于保持顺畅的特性，那就是Dart能AOT编译为本地机器码。预编译的AOT代码比JIT更具可预测性，因为在运行时不需要暂停执行JIT分析或编译。

AOT编译

然而，AOT编译代码还有一个更大的优势，那就是避免了“JavaScript桥梁”。当动态语言（如JavaScript）需要与平台上的本地代码互操作时，它们必须通过桥进行通信，这会导致上下文切换，从而必须保存特别多的状态（可能会存储到辅助存储）。这些上下文切换具有双重打击，因为它们不仅会减慢速度，还会导致严重的卡顿。

Dart 的基本语法

如果你有 java 语言的基础，发现dart里边的 API 几乎 90% 以上相同, 几乎很快能上手，这里我就特别指出他们的不同点。这里我想最快的入门方法，应该是查看官网的 quick start, 快速正版放心，而且不会过时，一直在更新。这里我简单的介绍一下：

Hello World

变量的声明

方法的定义

基本类型

条件判断

循环语句

由于篇幅有限，我这里列举一下我认为特别的地方，剩下的可以仔细阅读。

Hello World

我们万年老套路 Hello World，熟悉他语言的运行机制。

// 定义一个函数        printNumber(num aNumber) {          print('The number is $aNumber.'); //控制台打印        }        // 启动方法，类似于 java 的main函数        main() {          var number = 42;           printNumber(number);         }复制代码

我们可以以看到一下几点：

能赋值给变量的所以东西都是对象，包括 numbers, null, function, 都是继承自 Object 内置类

尽量给变量定义一个类型，会更安全，没有显示定义类型的变量在 debug 模式下会类型会是 dynamic（动态的）

dart 在 running 之前解析你的所有代码，指定数据类型和编译时的常量，可以提高运行速度

dart 提供了顶级函数(如：main())

dart 没有 public、private、protected 这些关键字，变量名以"_"开头意味着对它的 lib 是私有的

变量声明

没有初始化的变量都会被赋予默认值 null

var name = 'Bob';var unInitializeValue1;   //未给初值的变量，默认值为 nullInt unInitializeValue2;   //即使是Int 型，默认值也是 null//类似于 Kotlin, 可以推导出 name 为字符串类型var name = 'Bob';// 如果不想 推导出类型，下边两种写法dynamic name = 'Bob';Object name = 'Bob';复制代码

程序中只当数据类型是为了指出自己的使用意图，并帮助语言进行语法检查。但是，指定类型不是必须的,类似于Kotlin 会进行类型推导。

基本类型

number 取值范围：-2^53 to 2^53

// String -> intvar one = int.parse('1');// String -> doublevar onePointOne = double.parse('1.1');// int -> StringString oneAsString = 1.toString();// double -> String 注意括号中要有小数点位数，否则报错String piAsString = 3.14159.toStringAsFixed(2);复制代码

string

'''...'''，"""..."""表示多行字符串

r'...',r"..."表示“raw”字符串

用 $或$ {} 来计算字符串中变量的值

示例代码:

var s = 'Android Developer';  print ('A Commpany has a $s, which is good idea.' ==      'A Commpany has a Android Developer,' +          ' which is good idea.');  print('I am a ' +      '${s.toUpperCase()} is very hornor!' ==      'I am a ' +          'ANDROID DEVELOPER is very hornor!');复制代码

bool 布尔类型

Dart 是强 bool 类型检查，只有bool 类型的值是true 才被认为是true

list 列表

var vegetables = new List();// 或者简单的用List来赋值var fruits = ['apples', 'oranges'];// 添加元素fruits.add('kiwis');// 添加多个元素fruits.addAll(['grapes', 'bananas']);// 获取第一个元素fruits.first;// 获取元素最后一个元素fruits.last;// 查找某个元素的索引号assert(fruits.indexOf('apples') == 0);// 删除指定位置的元素，返回删除的元素fruits.removeAt(index);// 删除指定元素,成功返回true，失败返回falsefruits.remove('apples');// 删除最后一个元素，返回删除的元素fruits.removeLast();// 删除指定范围元素，含头不含尾，成功返回nullfruits.removeRange(start,end);// 删除指定条件的元素，成功返回nullfruits.removeWhere((item) => item.length >6)；// 删除所有的元素fruits.clear();// sort()对元素进行排序，传入一个函数作为参数，return <0表示由小到大， >0表示由大到小fruits.sort((a, b) => a.compareTo(b));复制代码

map 散列表

// Map的声明var hawaiianBeaches = {    'oahu' : ['waikiki', 'kailua', 'waimanalo'],    'big island' : ['wailea bay', 'pololu beach'],    'kauai' : ['hanalei', 'poipu']};var searchTerms = new Map();// 指定键值对的参数类型var nobleGases = new Map
    
     ();// Map的赋值，中括号中是Key，这里可不是数组nobleGase[54] = 'dart';//Map中的键值对是唯一的//同Set不同，第二次输入的Key如果存在，Value会覆盖之前的数据nobleGases[54] = 'xenon';assert(nobleGases[54] == 'xenon');// 检索Map是否含有某Keyassert(nobleGases.containsKey(54));//删除某个键值对nobleGases.remove(54);assert(!nobleGases.containsKey(54));复制代码

条件判断和循环

if...else

while do-while

break continue

switch...case 如果 case 后面有表达式但是没有 break，会抛出异常

assert（仅在checked模式有效），如果条件为假，抛出异常

这里我介绍了一下基本语法，还有函数、异常、单线程的操作，由于篇幅有限，而且我们也是一个入门教程，我这里就介绍到这里，如果想具体查看，可以点击我推荐的官网教程，用的 dart2 的方式。

Flutter如何使用Android和iOS的平台特性

Flutter使用了一个灵活的系统，允许您调用特定平台的API，无论在Android上的Java或Kotlin代码中，还是iOS上的ObjectiveC或Swift代码中均可用。

Flutter平台特定的API支持不依赖于代码生成，而是依赖于灵活的消息传递的方式：

应用的Flutter部分通过平台通道（platform channel）将消息发送到其应用程序的所在的宿主（iOS或Android）。

宿主监听的平台通道，并接收该消息。然后它会调用特定于该平台的API（使用原生编程语言）并将响应发送回客户端，即应用程序的Flutter部分。

调用流程如下:

电池电量的 banerry

（1）创建一个新的应用程序项目

首先创建一个新的应用程序: 方式一：在终端运行中：

flutter create batterylevel复制代码

默认情况下，模板支持使用Java编写Android代码，或使用Objective-C编写iOS代码。要使用Kotlin或Swift，请使用-i和/或-a标志:

在终端中运行:

flutter create -i swift -a kotlin batterylevel复制代码

方式二: 也可以通过项目new Flutter Project 来创造项目

（2）创建Flutter平台客户端

该应用的State类拥有当前的应用状态。我们需要延长这一点以保持当前的电量

首先，我们构建通道。我们使用MethodChannel调用一个方法来返回电池电量。

通道的客户端和宿主通过通道构造函数中传递的通道名称进行连接。单个应用中使用的所有通道名称必须是唯一的;

import 'dart:async';import 'package:flutter/material.dart';import 'package:flutter/services.dart';...class _MyHomePageState extends State
    
      {  static const platform = const MethodChannel('samples.flutter.io/battery');  // Get battery level.}复制代码

接下来，我们调用通道上的方法，指定通过字符串标识符调用方法getBatteryLevel。该调用可能失败。

例如，如果平台不支持平台API（例如在模拟器中运行时），所以我们将invokeMethod调用包装在try-catch语句中。

我们使用返回的结果，在setState中来更新用户界面状态batteryLevel。

// Get battery level.  String _batteryLevel = 'Unknown battery level.';  Future
    
      _getBatteryLevel() async {    String batteryLevel;    try {      final int result = await platform.invokeMethod('getBatteryLevel');      batteryLevel = 'Battery level at $result % .';    } on PlatformException catch (e) {      batteryLevel = "Failed to get battery level: '${e.message}'.";    }    setState(() {      _batteryLevel = batteryLevel;    });  }复制代码

最后，我们在build创建包含一个小字体显示电池状态和一个用于刷新值的按钮的用户界面。

overrideWidget build(BuildContext context) {  return new Material(    child: new Center(      child: new Column(        mainAxisAlignment: MainAxisAlignment.spaceEvenly,        children: [          new RaisedButton(            child: new Text('Get Battery Level'),            onPressed: _getBatteryLevel,          ),          new Text(_batteryLevel),        ],      ),    ),  );}复制代码

（3）在Android平台的代码实现

接下来，在 ManActivity 中的 onCreate里创建MethodChannel并设置一个MethodCallHandler。确保使用与在Flutter客户端使用的通道名称相同。

public class MainActivity extends FlutterActivity {    private static final String CHANNEL = "samples.flutter.io/battery";    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(                new MethodCallHandler() {                    @Override                    public void onMethodCall(MethodCall call, Result result) {                        if (call.method.equals("getBatteryLevel")) {                            int batteryLevel = getBatteryLevel();                            if (batteryLevel != -1) {                                result.success(batteryLevel);                            } else {                                result.error("UNAVAILABLE", "Battery level not available.", null);                            }                        } else {                            result.notImplemented();                        }                    }                });    }    private int getBatteryLevel() {        int batteryLevel = -1;        if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {            BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE);            batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);        } else {            Intent intent = new ContextWrapper(getApplicationContext()).                    registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));            batteryLevel = (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) /                    intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);        }        return batteryLevel;    }}复制代码

到此为止，我们介绍完如何使用两个平台的特殊 API ,如果你在使用flutter 开发的时候，碰到官方没有支持的api，你可以自己去实现两个平台的代码，来实现你想要的效果。

除去UI部分，代码如何在 Android/IOS 复用

如果您希望在多个Flutter应用程序中使用特定于平台的代码，将代码分离为位于主应用程序之外的目录中，做一个平台插件会很有用。这样就可以把 UI 部分刨除掉，复用代码部分。我们可以开发插件来来实现我们要的通用的部分，如何开发一个插件呢？这里我就不班门弄斧了，你可以直接查看官网提高的

实例展示

通过上边的介绍，大家对于Flutter 有一定的理解，下面我们实现一个demo项目，如何我们开始进入实战阶段，我们具体实现的效果如图下：主页（Tab栏+Banner轮播图+ViewPaper）：

抽屉：

创建一个项目

通过Android Studio new 一个flutter Project 项目，删除lib/main.dart代码，我们开始自己实现代码。

添加 MaterialAPP

MaterialAPP 是一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。Material 风格是我们一直想实现的风格，这里放到最外层就能实现我们想要的效果是不是很 Happy？

// 导入用的依赖import 'package:flutter/material.dart';// main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写void main() => runApp(new MyApp());// 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: 'home', // 默认标题      home: new HomePage(), // 返回的界面    );  }}复制代码

StatelessWidget 和 StatefulWidget 的区别

细心的同学已经发现，我们用到的 widget 发现有，StatelessWidget 和 StatefulWidget , 他们的区别如下：

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

一个 StatefulWidget类。

一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.

class HomePage extends StatefulWidget {  @override  State
    
      createState() => new _HomePageState();}class _HomePageState extends State
     
       {    }复制代码

添加 Scaffold 页面框架组件

Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性

class _HomePageState extends State
    
      {    @override  Widget build(BuildContext context) {    return new DefaultTabController(      child: new Scaffold(        appBar: , // 标题        body: ,//主屏幕        drawer: ,//抽屉        bottomNavigationBar: ,// Tab栏       ),    );  } }复制代码

添加标题

添加标题比较简单，他的属性不多，我这里只添加 appbar 的名称属性，因为我们后边需要添加导航栏，标题名称会发生改变，我这里实现代码如下：

class _HomePageState extends State
    
      {      @override    Widget build(BuildContext context) {    return new DefaultTabController(      child: new Scaffold(        appBar: new AppBar(          title: _getTitle(),// 抽取成方法        ), // 标题        body: ,//主屏幕        drawer: ,//抽屉        bottomNavigationBar: ,// Tab栏       ),    );    }     // 方法    _getTitle() {    switch (index) {      case 0:        return _forMatchTitle('电影');      case 1:        return _forMatchTitle('图书');      case 2:        return _forMatchTitle('音乐');    }    }        //获取标题的样式    _forMatchTitle(String data) {    return new Text(data);    }}复制代码

添加抽屉

添加抽屉，就直接在中对应的属相添加组件即可。

class _HomePageState extends State
    
      {      @override    Widget build(BuildContext context) {    return new DefaultTabController(      child: new Scaffold(        appBar: new AppBar(          title: _getTitle(),// 抽取成方法        ), // 标题        body: ,//主屏幕        drawer: ,//抽屉        bottomNavigationBar:  bottomNavigationBar: new BottomNavigationBar(            onTap: _selectPosition,            currentIndex: index,            type: BottomNavigationBarType.fixed,            iconSize: 24.0,            items: new List
     
      .generate(3, (index) {              switch (index) {                case 0:                  return new BottomNavigationBarItem(                      icon: new Icon(Icons.movie), title: new Text('电影'));                case 1:                  return new BottomNavigationBarItem(                      icon: new Icon(Icons.book), title: new Text('图书'));                case 2:                  return new BottomNavigationBarItem(                      icon: new Icon(Icons.music_note), title: new Text('音乐'));              }            })),// Tab栏       ),    );    }      //获取选中的tab 索引    _selectPosition(int index) {    if (this.index == index) return;    setState(() {      this.index = index;    });  }}复制代码

由于篇幅，还剩下主内容、抽屉、轮播图的实现，我就不一一说明了，具体内容我放到了github上，搜索 studylifetime/flutter_demo 就不往文章上贴代码了。具体实现详情可以查看源码，里边注释比较清楚。

总结

对于 Android 开发人员来说，入门比较简单，dart 与java 非常类似，语言这一关很好过，熟悉一下界面开发，便可快速上手开发了。但是Flutter 现在还不适合商业项目的开发，平时使用的微信支付、登录，推送消息，bugly 错误上报，这些都需要国内的厂商来适配，推送、错误上报、分享如果从头做一遍的话，会牵扯公司很大精力。

参考引用

欢迎关注微信公众号，接收第一手技术干货

前言