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里实现，先来两张截图感觉一下：

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

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入门（二）查看，或者你们能够参考源代码自行理解。

工程

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

项目下会有三个主要的目录， 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入门（二）。