Flutter27，android开发项目app实例
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
}
@JsonSerializable()
class Source extends Object with _$SourceSerializerMixin {
final String id;
final String name;
Source(this.id, this.name);
factory Source.fromJson(Map
}
@JsonSerializable()
class NewsList extends Object with _$NewsListSerializerMixin {
final String status;
final int totalResults;
final List articles;
final code;
final message;
NewsList(this.status, this.totalResults, this.articles, this.code, this.message);
factory NewsList.fromJson(Map
}
看起来既有熟悉的字段，又有陌生的注解和代码？没关系，只要你按照这里的要求来做就行了。可以看出反序列化是在_$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 getHeadLines({String category: “general”, int page: 0}) async {
final response = await http.get(
“https://newsapi.org/v2/top-headlines?country=us&apiKey=efaf5fb66d104385ad40c73d4fd4acb1&page=KaTeX parse error: Expected 'EOF', got '&' at position 5: 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 {
List _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存储出来的新闻列表，在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入门（二）查看，或者大家可以参考源代码自行理解。
要从网络加载。有一个placeHolder并且加载完有淡入淡出的效果，在Android中我们可能会用Glide来实现，而在Flutter中，仅需几行代码也可以做到
FadeInImage.assetNetwork(
//图片url
image: ‘${news.urlToImage}’,
// 图片scale方式
fit: BoxFit.fitWidth,
// 占位图，从assets 中获取
placeholder: ‘images/news_cover.png’,
)
总体流程基本上走完了，未涉及到的下拉刷新，最底加载，WebView等技术点 可以戳这里Android开发者的Flutter入门（二）查看，或者大家可以参考源代码自行理解。