Flutter试玩

 1// Material应用
 2import 'package:flutter/material.dart';
 3
 4// 入口函数（函数体只有一行时，可以用`=>`代替{ ... }）
 5void main() => runApp(new MyApp());
 6
 7// 继承StatelessWidget（Stateless意味着不需要mutable状态）
 8// 使MyApp本身也成为一个Widget.
 9// 在Flutter下，几乎一切都是Widget.
10class MyApp extends StatelessWidget {
11  @override
12  Widget build(BuildContext context) {
13    return new MaterialApp(
14      title: 'PM 2.5',
15      home: new Scaffold(
16        appBar: new AppBar(
17          title: new Text('未知城市'),
18        ),
19        body: new Center(
20          child: new Text('-1'),
21        ),
22      ),
23    );
24  }
25}

1import 'dart:async';
2import 'dart:convert';
3
4import 'package:http/http.dart' as http;

 1// 异步函数（`async`和`await`为关键字）
 2Future<AQI> fetchAQI() async {
 3  // Android模拟器可以通过10.0.2.2访问主机。
 4  String url = "http://10.0.2.2:8000/aqis.json";
 5  final response = await http.get(url);
 6  final responseJson = json.decode(response.body);
 7
 8  return new AQI.fromJson(responseJson);
 9}
10
11// Flutter用不了dartson（dart下的gson）之类的需要运行时反射的库，
12// 所以简单的json结构手工解析，复杂的json结构通过生成代码解析。
13class AQI {
14  final int pm2_5;
15
16  AQI({this.pm2_5});
17  // json.decode返回Map<String, dynamic>
18  // 这意味着，直到运行时才能确定具体类型
19  factory AQI.fromJson(Map<String, dynamic> json) {
20    return new AQI(
21      pm2_5: json['pm2_5'],
22    );
23  }
24}

 1   body: new Center(
 2          child: new FutureBuilder<AQI>(
 3            future: fetchAQI(),
 4            builder: (context, snapshot) { // 匿名函数
 5              if (snapshot.hasData) {
 6                return new Text("${snapshot.data.pm2_5}");
 7              } else if (snapshot.hasError) {
 8                return new Text("${snapshot.error}");
 9              } else {
10                return new CircularProgressIndicator();
11              }
12            },
13          )
14        ),

 1import 'dart:async';
 2import 'dart:convert';
 3
 4import 'package:flutter/material.dart';
 5import 'package:http/http.dart' as http;
 6
 7Future<AQI> fetchAQI() async {
 8  String url = "http://10.0.2.2:8000/aqis.json";
 9  final response = await http.get(url);
10  final responseJson = json.decode(response.body);
11
12  return new AQI.fromJson(responseJson);
13}
14
15class AQI {
16  final int pm2_5;
17
18  AQI({this.pm2_5});
19
20  factory AQI.fromJson(Map<String, dynamic> json) {
21    return new AQI(
22      pm2_5: json['pm2_5'],
23    );
24  }
25}
26
27
28
29void main() => runApp(new MyApp());
30
31class MyApp extends StatelessWidget {
32  @override
33  Widget build(BuildContext context) {
34    return new MaterialApp(
35      title: 'PM 2.5',
36      home: new Scaffold(
37        appBar: new AppBar(
38          title: new Text('PM 2.5'),
39        ),
40        body: new Center(
41          child: new FutureBuilder<AQI>(
42            future: fetchAQI(),
43            builder: (context, snapshot) {
44              if (snapshot.hasData) {
45                return new Text("${snapshot.data.pm2_5}");
46              } else if (snapshot.hasError) {
47                return new Text("${snapshot.error}");
48              } else {
49                return new CircularProgressIndicator();
50              }
51            },
52          )
53        ),
54      ),
55    );
56  }
57}