Android开发者的Flutter入门（一）

前言

Flutter推出来已经有一段时间了，前一阵Google IO大会后发布了Beta3。基于Flutter的 app可以一次编写，同时在Android和iOS平台上跑，并且能给用户带来完全原生的体验。我们都知道跨平台开发还有Hybrid，React Native以及Weex等方案，这些解决方案都是从Web开发的角度向Native开发演进，其技术基础都是HTML、CSS和Javascript等Web技术，对于没有接触过Web开发的Native app程序员来讲，门槛是比较高的。而Flutter给我的感觉是从Native开发向Web开发演进，Native app程序员应该能比较舒服的入门。

作为一名Android开发者，我始终认为跨平台是移动端开发的发展趋势，但是哪一种技术方案会最终胜出，还有待时间的检验。Flutter对Native开发者友好，并且吸纳了React等Web开发的前沿技术，可以作为Native程序员学习跨平台开发的很好的路径。

为了学习Flutter, 我试着开发了一个简单的新闻app，涵盖了一些移动端app比较基础的功能。接下来我会对照这个app来给大家介绍一下Flutter开发的一些知识。整个工程源码大家可以从Github获取。如有任何问题或建议，欢迎大家提issue。

本文是Android开发者的Flutter入门的第一部分，有一些技术细节放在了第二部分介绍，戳这里查看 Android开发者的Flutter入门（二）。

语言

Flutter是用Dart语言开发的。所以在开发Flutter app之前，需要我们对Dart语言有一定的掌握。对于Android程序员来讲，学习Dart是比较快的一个过程，和Java一样，Dart也是面向对象的语言。很多地方都是相通的。需要注意的是对于Dart里的类（各种构造函数，getter,setter），函数(函数也是对象，函数内部可以定义函数，函数可以作为参数和返回值, 闭包)，以及异步(Future,async和await)等地方要反复揣摩，仔细体会。

有了Dart的基础，那么我们就可以开始尝试开发个Flutter app了。

预备

首先你要配置Flutter的开发环境。对于我们Android程序员来讲，那就是再熟悉不过的Android Studio了。整个配置过程是比较简单的，大家照文档走就是了。不过要注意一点，如果你没有穿墙的的话，需要看一下这里。

开始

好了，环境已经弄好了，可能你已经把Hello World也跑起来了。那么我们就用Flutter来开发一个稍微像样点的app吧。

我们开发的是一个简单新闻app。主要包含两个页面，一个首页，显示一个头条新闻的列表，点击里面的某个头条，就跳转到那条新闻的详情页面。这个简单的app包含了一些比较基础的功能:

如何通过网络从服务器请求数据？ Android程序员：我用OkHttp。 如何解析返回数据？ Android程序员：我用Gson。 返回的数据如何在界面上显示出来？ Android程序员：我用RecylerView。 如何显示网络图片？ Android程序员：我用Glide。 页面之间如何跳转？ Android程序员：我用Intent。 如何加入下拉刷新? Android程序员：我用SwipeRefreshLayout。

接下来我们就说说以上这些功能如何在Flutter里实现，先来两张截图感受一下：

新闻列表

新闻详情

新闻源我们使用的是https://newsapi.org。你只要申请一个apiKey就能从他家获取json格式的头条新闻数据。至于详情的话需要用webview直接打开对应的新闻url。

JSON解析

网络返回的JSON数据格式如图所示：

JSON

这里面"articles"字段的值是个jsonArray，内容是头条新闻的列表。在Android中我们可以用Gson来把json数据反序列化为对象。那再Flutter中如何来做反序列化呢？

首先我们引入必要的库：

在pubspec.yaml加入以下内容

dependencies:
  json_annotation: ^0.2.3
dev_dependencies:
  build_runner: ^0.8.0
  json_serializable: ^0.5.0

然后在终端中运行flutter packages get（或者点击"Packages Get"的提示,类似你更改.gradle文件以后Android Studio显示的同步提示）

接下来就是model类了

import 'package:json_annotation/json_annotation.dart';

part "news.g.dart";

@JsonSerializable()
class News extends Object with _$NewsSerializerMixin {
  final String author;
  final String title;
  final String description;
  final String url;
  final String urlToImage;
  final String publishedAt;
  final Source source;

  News(this.author,
      this.title,
      this.description,
      this.url,
      this.urlToImage,
      this.publishedAt,
      this.source);

  factory News.fromJson(Map<String, dynamic> json) => _$NewsFromJson(json);
}

@JsonSerializable()
class Source extends Object with _$SourceSerializerMixin {
  final String id;
  final String name;

  Source(this.id, this.name);

  factory Source.fromJson(Map<String, dynamic> json) => _$SourceFromJson(json);
}

@JsonSerializable()
class NewsList extends Object with _$NewsListSerializerMixin {

  final String status;
  final int totalResults;
  final List<News> articles;
  final code;
  final message;

  NewsList(this.status, this.totalResults, this.articles, this.code, this.message);

  factory NewsList.fromJson(Map<String, dynamic> json) => _$NewsListFromJson(json);

}

看起来既有熟悉的字段，又有陌生的注解和代码？没关系，只要你按照这里的要求来做就行了。可以看出反序列化是在_$NewsListFromJson(json);里完成的。那么这个函数从何而来呢？这需要我们运行命令flutter packages pub run build_runner build来生成对应的代码。生成的代码存放在news.g.dart中。

至此model类以及反序列化我们就已经做完了，那么下面就看看网络请求怎么来实现。

网络请求

对应于Android中的OkHttp, Flutter中的网络请求库是http.dart。如下所示，代码比较简单

import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

import 'package:flutter_news/model/news.dart';

class NewsApi {
  static Future<NewsList> getHeadLines({String category: "general", int page: 0}) async {
    final response = await http.get(
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=efaf5fb66d104385ad40c73d4fd4acb1&page=$page&category=$category");

    return compute(parseResult, response.body);
  }

  static NewsList parseResult(String respond) {
    return NewsList.fromJson(json.decode(respond));
  }
}

我们都知道在Android中网络请求需要在子线程来做，否则会阻塞主线程；请求的结果通过callback来返回给主线程。

而在Flutter中则更加简洁，通过async和await，避免了难看的callback代码嵌套。

函数getHeadLines用来做http请求，在走到await的时候会"等待"后面的http.get函数执行完毕，返回值赋给response，之后继续执行函数体中的后续代码。注意，这里的"等待"并不是阻塞在那里，而只是告诉系统，后续的代码需要在await后面的表达式结束之后执行。你可以把await那一行以下的代码理解为Android网络调用中的callback。实际的运行机制其实是比较复杂的，需要另写文章详细说明。

在请求得到返回值response以后就要做json反序列化了。因为反序列化也有可能是个耗时任务，有可能会阻塞ui. 这里我们用过Flutter提供的compute函数把反序列化放在另外的isolate去完成。这里你可以先把isolate当成是Java里的线程。compute函数的第一个参数parseResult是真正进行反序列化操作的函数。大家可以感受一下，函数作为参数还是比较方便的。

Model层我们已经有了，那么接下来就看下View层怎么来搭建吧。

界面

在做Android原生开发的时候。我们一般会用XML来搭建界面，里面是一个一个的View。而在Flutter中，和View等同的是Widget。Flutter app的界面就是由一个个Widget拼接起来的。而且Widget都是写在代码中的，目前没有用xml等其他搭建UI的方式，这也是目前Flutter开发被吐槽的点，代码中各种嵌套的Widget还是比较令人酸爽的。

Widget分为StatelessWidget（无状态的）和StatefulWidget（有状态的）。无状态是指这个Widget的状态会发生改变，类比如Android中显示固定字符串的TextView或者显示固定图标的ImageView。反之有状态则是指这个Widget在显示期间内状态会发生改变，就比如我们在做网络请求的时候会显示一个Progress图标，请求回来数据以后会显示一个列表。这就是状态发生了变化。当需要变更状态的时候，只要调用setState。StatefulWidget的build函数会被调用，根据新的state来重建UI，是不是听起来和Android中的notifyDataSetChanged有点像？

让我们自上而下的看一下main.dart的代码吧

// 我是入口，类似于java中的 static main()
void main() => runApp(new MyApp());

// 我是最外层的容器，我不关心里面内容的变化，所以是无状态的。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //返回给你一个MaterialApp，至于内部还有啥，看参数
    return MaterialApp(
      title: 'Headlines',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 这个Widget是我们自定义的
      home: HeadLinePage(title: 'Headlines'),
    );
  }

入口的这些代码都是常规操作。不细说了。

这里顺便说一句，一个.dart文件中是可以包含多个在最外层的类的，这点和Java是不一样的，需要习惯一下。

接下来我们再实现自定义的Widget: HeadLineList。因为其状态会发生改变（有网络请求），所以这是个StatefulWidget。

class HeadLineList extends StatefulWidget {
  @override
  _HeadLineListState createState() => new _HeadLineListState();
}

Emmm....... 自定义一个Widget只需要一行代码吗？答案是否定的，干货都在_HeadLineListState里......

class _HeadLineListState extends State<HeadLineList> {

  List<News> _articles;
  
  Future _getNews() async {
    NewsList news = await NewsApi.getHeadLines();
    _articles = news?.articles;
    //有数据了 触发ui更新
    setState(() {
    });
  }

  @override
  void initState() {
    super.initState();
    //初始化 开始加载
    _getNews();
  }

  @override
  Widget build(BuildContext context) {
    switch (_status) {
      case IDLE:
        //有数据了，返回列表
        return ListView.builder(
                itemCount: _articles.length,
                itemBuilder: (context, index) {return NewsItem(news: _articles[index])};
      case LOADING:
        //加载中，返回个加载框
        return Center(child: CircularProgressIndicator());
    }
  }
}

这里HeadLineList是包含加载进度框和新闻列表的容器Widget。而_HeadLineListState是和其关联的状态。真正创建Widget是在build函数内。这里会根据不同的状态返回不同的Widget。List<News> _articles;存储出来的新闻列表，在initState初始化的时候开始调用网络请求。

在状态变为加载完成时，build函数内会用ListView.builder来创建显示列表。这里不需要像Android里的ListView那样需要一个Adapter，给itemBuilder传个函数参数就行了，这个函数参数返回我们自定义的无状态Widget, NewsItem, 作为列表显示项。

自定义的NewsItem会有一个充满控件的背景图片，这个图片需要从网络加载。有一个placeHolder并且加载完有淡入淡出的效果，在Android中我们可能会用Glide来实现，而在Flutter中，仅需几行代码也可以做到

FadeInImage.assetNetwork(
       //图片url
        image: '${news.urlToImage}',
       // 图片scale方式
        fit: BoxFit.fitWidth,
       // 占位图，从assets 中获取
        placeholder: 'images/news_cover.png',
      )

总体流程基本上走完了，未涉及到的下拉刷新，最底加载，WebView等技术点 可以戳这里Android开发者的Flutter入门（二）查看，或者大家可以参考源代码自行理解。

工程

最后我们再看一下整个工程的目录结构：

image

项目下会有三个主要的目录，android , ios和lib。android , ios目录分别是存放两个平台的相关代码。所有的Flutter代码都存放在lib目录下。pubspec.yaml文件项目的配置文件，类似于Android工程中的build.gradle。我们再看看Android开发者比较关心的android目录，这里只有一个MainActivity, 代码如下：

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
  }
}

可见这唯一的一个Activity就是个空壳，只是用来给Flutter app提供一个容器。

打包

打apk只需要一条命令：

flutter build apk

当然，这之可能需要做一些配置，具体可参考这个文档

总结

移动端跨平台开发是大势所趋，Flutter是一个比较强大的跨平台解决方案，虽然现在还是在Beta阶段，并没有完全成熟。但是相对于其他跨平台解决方案，其对Native app开发者友好，同时又吸收了一些先进的Web开发技术理念，是一个比较顺一些的学习跨平台开发的路径。另外对于一些未涉及的技术细节大家可以到这里查看Android开发者的Flutter入门（二）。