极客时间对于推广渠道会有返利优惠，比如山月在极客时间买了一门课，再把课程分享给好友购买，这时极客时间会向山月返利20元左右。

而我现在做了一个返利平台，你可以在上边通过山月的链接购买课程，此时极客时间会向我返利。为了共同学习，而你可以添加我的微信 (shanyue94)，我将把极客时间给我的返利发一个红包全部返给你。

# flutter

flutter 的出现不得不说是激动人心的，你可以以 React-Style 的方式写多端应用。而相比 RN 而言，它自身的版本迭代也比较积极。

# 前言

# 开发系统

我在 MacOS 上进行开发

# shell

我的 shell 是 zsh，配置文件在 ~/.zshrc。如果你们的是

mobile -> android
基础 -> 前端 css 与 react

建议跟着目录走

# 翻译

compile-time (编译时)
run-time (运行时)
generic type (泛型)

# 安装

# 安装到自己感兴趣的位置，这里安装在 /app 目录下
cd /app
curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.2.1-stable.zip
unzip flutter_macos_v1.2.1-stable.zip

# 写入到环境变量
echo 'export PATH="$PATH:/app/flutter/bin"' >> ~/.zshrc

# 选择你工作所使用的 shell，可以是 bash 也可以是 zsh
# echo 'export PATH="$PATH:/app/flutter/bin"' >> ~/.bashrc

# 执行生效
source ~/.zshrc

完成以上命令后，运行命令 flutter doctor 查看是否安装成功，如果没有则有对相关扩展的安装提示。有以下扩展，可以参考相关文章进行安装

Android toolchain (SDK)
IOS toolchain
Android Studio

# 网络问题

在国内，如果出现了关于网络的问题，官方早已想到了解决方案，参考本篇文章 Using Flutter in China (opens new window)。

执行以下命令更换安装包的源，你也可以选择其它的源

# 写入你自己的 shell 文件
cat <<EOF >> ~/.zshrc
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
EOF

# 编辑器

# VS Code

需要与插件 Dart 配合使用

在 VS Code 下，对启动，调试，热加载，Goto Path 以及自动补全都相当方便，强烈推荐。

参考官方文档 https://flutter.dev/docs/development/tools/vs-code

# vim

dart-vim-plugin (opens new window)

使用该插件无法正确缩进圆括号内代码

参考 https://github.com/dart-lang/dart-vim-plugin#faq

# 运行第一个应用

使用以下命令新建一个项目并使用 VS Code 打开。当然你也可以选择使用编辑器新建项目

cd ~/flutter-examples

# 新建项目时会自动执行 flutter packages get 来装包
flutter create hello-world 

# 进入项目目录
cd hello-world

# 装包，新建项目时已自动执行
# flutter packages get

# 列出模拟器列表
flutter emulators

# 启动一个模拟器，输入 emulatorId 的前缀即可
flutter emulators --lauch <emulatorId>

# 查看设备列表
flutter devices

# 运行，成功后可以在模拟器中看见界面
flutter run

# 如果有多个设置，选择某个设备进行调试，输入前缀即可
flutter run -d <deviceId>

运行成功界面

如果没有走完流程，也非常正常，通向成功的道路从不一帆风顺，学习新技术总会遇到不少坑。这里列举新建项目时出现的几个小问题

# 热加载

你会发现你保存文件时没有更新界面，这是因为你使用了命令启动，并未与编辑器进行绑定。

使用命令 flutter run 运行成功后，按键 r 进行热加载，R 进行热重启，会刷新应用状态。

# 真机运行

在 Android 上真机运行，需要打开

开发者选项
USB 调试
USB 安装

# 问题

# 装包卡顿

装包卡顿有可能是因为国内网络的原因，请参考以上章节网络问题

如果还有问题，在 flutter 创建的项目根目录中定位文件 ./android/build.gradle，进行如下修改

// 修改前文件
buildscript {
    repositories {
        google()
        jcenter()
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}


// 修改后文件
buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}
allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

# 命令锁住

在执行 flutter 命令时，有可能遇到命令被锁住的情况

Waiting for another flutter command to release the startup lock...

更多解决方案参考 https://github.com/flutter/flutter/issues/17422

使用以下命令解决

# 删除 bin 目录下的 lockfile
rm /app/flutter/bin/cache/lockfile

# 动手写第一个应用

动手写一个 flutter 的 hello, world 应用。编辑 /lib/main.dart 如下

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('hello, world', textDirection: TextDirection.ltr)
  }
}

在模拟器或真机上运行。运行后是一个黑色界面，左上角写着 hello, world 虽然丑了点，好歹麻雀虽小五脏俱全。另外，如果你写过 React, 发现它和 React 的写法如此相像。人在学习新东西时，如果与旧知识有关联性，能够学的很快。

你会发现，StateLessWidget 与 React 的 Component 相似，而 build 函数与 React 的 build 相似。

import React, { Component } from 'react';
import { render } from 'react-dom';

render(<App />, document.getElementById('app'));

class App extends Component {
  render () {
    return <div>hello, world</div>
  }
}

# Dart

敲完了第一个应用，你会发现 Text('hello, world', textDirection: TextDirection.ltr) 这个函数很怪，有点像 js 的 Text('hello, world', { textDirection: TextDirection.ltr }) 或者 python 的 Text('hello, world', textDirection=TextDirection.ltr )。

这时候，你发现 flutter 仅仅是依赖于 Dart 下的移动开发框架，现在有必要学习一下 Dart 的语法了。

Dart 是一门强类型的静态语言，而且必须加分号。

如果你需要更为详细的文档，参考官方文档 https://www.dartlang.org/guides/language/language-tour

# 环境

正如 codepen 可以在线学习与测试前端。你也可以在 DartPad (opens new window) 中，打开浏览器在线学习 Dart 语言。

# main() 函数

入口函数，如同 C 语言一样。

void main() {
  print('hello, world');
}

# 变量

Dart 是强类型语言，但也可以直接使用 var 声明一个变量。

void main() {
  var a = 3;
  int b = 4;

  const c = 10;
  final d = 100;

  dynamic e = 'hello, world';
}

# `final` 和 `const` 的区别是什么

const 编译时确定，const 运行时确定。

了解两者不同后，以下示例的输出是什么

void test1() {
  final foo = [];
  foo.add(3);
 
  print(foo);
}

void test2() {
  const foo = [];
  foo.add(3);
 
  print(foo);
}

void main() {
  test1();
  test2();
}

void main() {
  final l = [1, 2, 3].map((x) => x+3);
  const l = [1, 2, 3].map((x) => x+3);
}

# `dynamic` 与 `var` 的区别是什么

你运行完以下代码，便可以知道两者的区别。

void main() {
  var foo = 'hello';
  var = 3;

  dynamic bar = 'hello';
  bar = 3;
}

# 内置类型 (Built-in Types)

参考类型风格指南建议 https://www.dartlang.org/guides/language/effective-dart/design#types

Dart 有如下数据类型，这里先简单介绍一下常用类型

number
- int
- number
string
boolean
list (array)
set
map
rune
symbol

void main() {
  // int
  var a = 1;
  print(a);

  // double
  var b = 3.14;
  print(b);

  // string
  // ${exp} 字符串变量解析。恩，有点像 shell
  var s = '$a + $b = ${a + b}';
  print(s);

}

# List

TODO 在 Dart 中，List，Set 和 Collection 统称为 Collection。它们有公共的方法 forEach 与 map 等。

void main() {
  var l = [1, 2, 3];

  // [1, 2, 3]
  print(l);

  l.add(4);
  l.addAll([5, 6]);

  // [1, 2, 3, 4, 5, 6]
  print(l);

  // 1
  print(l.first);

  // [2, 3, 4, 5, 6]
  print(l.skip(1));

  var ll = l.map((x) => x + 3);
  var lll = l.map((x) {
    return x + 3;
  });
  print(ll.runtimeType);
}

另外，在 js 中数组有一个我最喜欢的 API Array.prototype.reduce。在 dart 中可以使用 fold 替代

// 21
[1, 2, 3, 4, 5, 6].reduce((acc, x) => acc + x);

// 121
[1, 2, 3, 4, 5, 6].fold(100, (acc, x) => acc + x);

Q: 什么是泛型 (generic type)

# Set

void main() {
  // 或者 Set<String> colors = {};
  var colors = Set();
  colors.add('red');
  colors.add('blue');
  print(colors);
  print(colors.map((x) => x))

  assert(colors.contains('red'));
}

# Map

void main() {
  // Map<String, int> = {};
  var o = Map();
  o['a'] = 3;
  o['b'] = 4;
  print(o);

  o = {
    'a': 3,
    'b': 4,
    'c': 5
  };
  print(o);

  assert(o.containsKey('a'));
  o.forEach((k, v) {
    print('$k: $v');
  })

  print(o.entries);
  print(o.entries.map((o) => '${o.key}: ${o.value}'));
}

# 函数

bool isZero(int n) {
  return n == 0;
}

// 在 [] 中代表可选参数
bool isZero([int n]) {
  if (n != null) {
    return n == 0;
  }
  return false;
}

// 默认参数
bool isZero([int n = 0]) {
  if (n != null) {
    return n == 0; 
  }
  return false;
}

// 箭头函数
// 如 javascript 一样，相比 js 而言它只是少了一个 = 等于号
// javascript 👉 const isZero = (n) => n === 0;
bool isZero(int n) => n == 0;


// 匿名函数
// 如 javascript 一样，相比 js 而言参数必须带括号
[1, 2, 3].map((x) => x+1);
[1, 2, 3].map((x) {
  return x + 1;
});

# 操作符

#

# 类

class Point {
  final num x;
  final num y;
  final num z;

  Point(x, y): x = x, y = y, z = x + y;
}

void main() {
  var p = Point(3, 4);
  print(p.z);
}

# 异步

在 js 中有承诺(Promise)，在 Dart 中也有未来(Future)

// 与 js 的不同就是，dart 把 async 写到最后边了...
Future fetch() async {
  var res = await request.get();
}

# 布局

熟悉了 dart 的语法之后，可以动手画一个漂亮的界面 (UI)了。布局组件是构成 UI 的重要一步

更多布局组件参考官方文档 https://flutter.dev/docs/development/ui/widgets/layout

Padding
Container
Row
Column
Center
RenderBox
SizedBox
ConstrainedBox
Center
ListView
Text
Image
Transform
Opacity

# Constraint Box

正如 html 中元素有 block，inline，inline-box 之分。flutter 也有类似三类约束

尽可能撑高成宽 👉 Container 和 Center
与子组件等高等宽 👉 Transform 和 Opacity
特定尺寸 👉 Text 和 Image

当然上边只是一部分组件的约束，Container 也可以指定宽高，变为第三类。另外还有不受此约束的 ListView 与 Row/Column。

接下来介绍几种重要且常见的组件，如 Container，Row，Column

Text(
  textDirection: TextDirection.ltr
)

# Text 的 TextDirection 属性什么时候可以缺省，为什么

# Text 如何使用外部字体

添加字体至 $app/fonts/

修改 pubspec.yaml 配置文件，关于配置文件的具体作用请往下翻阅

flutter:
  fonts:
    - family: xinxi
      fonts:
        - asset: fonts/臺灣新細明體.ttf

代码中引用字体

Text(
    '暮从碧山下',
    style: TextStyle(
        fontSize: 36,
        fontFamily: 'xinxi',
    ),
),

无发热更新，重启应用生效

# Text 如何从上往下排列，实现 `writing-mode: vertical-rl` 的效果

使用一个取巧的办法，即把字体父元素宽度设置为仅仅大于字体宽度，可以视为从上往下排列

Container(
  width: 48,
  child: Text(
    '山月照弹琴',
     style: TextStyle(
       fontSize: 36,
     )
  ),
)

# 如何统一设置 Text 的字号字体和样式

可以通过设置 ThemeData 设置一套主题，其中的 textTheme 控制字体的样式

# 样式

BoxDecoration 可以设置 margin，padding, border 和 color (类似于 css 中的背景)等。与 css 类比如下

// dart
Container( 
  width: 100,
  height: 100,
  margin: EdgeInsets.all(24),
  padding: EdgeInsets.only(top: 24),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: const Colors.white,
    border: Border.all(
      color: Colors.blue,
      width: 1.0,
    ),
  ),
  child: MyWidget()
))


// css 
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  padding-top: 24px;
  text-align: center; 
  background-color: white;
  border: 1px solid blue;
}

# 颜色

表示颜色的有两类 Color 与 Colors，颜色的值可以使用十六进制，RGB 或者常量来表示。

// 黑色
Color(0xff000000)

// RGBO，类似于 css 中的 rgba
Color.fromRGBO(0, 0, 0, .3)

// 红色，等同与 Colors.red[500]
Colors.red

// 深红
Colors.red[900]

Row 与 Column 是几乎一模一样的组件，除了方向。如果你使用过 CSS 的 flex 布局，会很快理解这两个组件，他们完全是 flexbox，只不过 flex-direction 不一样。

如果两个组件在 HTML 中，那么他们的默认样式就如下所描述的 CSS 一般

Row {
  display: flex;
  flex-direction: row;
}

Column {
  display: flex;
  flex-direction: column;
}

flexbox 中有纵轴，横轴之分，Row/Column 自然也有这两个属性。自我感觉 flutter 更语义一些

Flutter: mainAxisAlignment/crossAxisAlignment
CSS: justify-content/align-items

而且它们的属性值也是相同的

mainAxisAlignment.center 👉 justify-content: center
mainAxisAlignment.start 👉 justify-content: flex-start
mainAxisAlignment.end 👉 justify-content: flex-end
mainAxisAlignment.spaceBetween 👉 justify-content: space-between
mainAxisAlignment.spaceAround 👉 justify-content: space-around
mainAxisAlignment.spaceEvenly 👉 justify-content: space-evenly

另外，在 css flex 中有一个 flex-grow 属性，可以对应到 flutter 中的 Expanded

# Material Design

Meterial Design Guidelines

参考官方文档 https://material.io/design/

由于 Scaffold 组件在平时使用的频率较多，所以也特别介绍一下。但是这一块不是特别重要可以跳过。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
            primarySwatch: Colors.blue,
            fontFamily: 'xinxi',
            textTheme: TextTheme(
              display2: TextStyle(
                  fontSize: 45.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            )),
        home: App());
  }
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('诗词'),
        actions: [
          IconButton(
            icon: Icon(Icons.share),
            color: Colors.white,
            onPressed: () {
              print('Press share');
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            color: Colors.white,
            onPressed: () {
              print('Press settings');
            },
          )
        ],
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                });
          },
        ),
      ),
      // 抽屉，从侧栏打开，如 QQ
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('诗酒趁年华', style: Theme.of(context).textTheme.display2),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('我的诗词', style: Theme.of(context).textTheme.display1),
            ),
            ListTile(
              title: Text('我的收藏', style: Theme.of(context).textTheme.display1),
            ),
          ],
        ),
      ),
      body: Center(
          child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 48,
              child: Text('山月照弹琴', style: TextStyle(fontSize: 36)),
            )
          ],
        ),
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('hello, world');
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('收藏')),
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('主页')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('诗词')),
        ],
      ),
    );
  }
}

# AppBar

# Icon

IconButton(
  icon: Icon(Icons.share),
  color: Colors.white,
  tooltip: '分享到朋友圈',
  onPressed: () { print('Icon Share'); },
),

至于更多图标参考 https://docs.flutter.io/flutter/material/Icons-class.html

# TabBar

TabBar 使用 Tab，TabBarView 以及 TabController 控制。

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({ Key key }) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

// with 操作符代表一个 Mixin，在创建 TabController 时会用到
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
  _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // TabBar 由两部分组成，一部分为上边的 label，另一部分为下边的横线 indicator
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
          // tab 下的横线大小，label 表示尽可能小，tab 表示尽可能大
          indicatorSize: TabBarIndicatorSize.label,
        ),
      ),
      // tab容器，在指向特定tab时所呈现的内容
      body: TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return Center(child: Text(tab.text));
        }).toList(),
      ),
    );
  }
}

更多内容参考 https://docs.flutter.io/flutter/material/TabController-class.html

# 布局实践

蜻蜓点水般介绍了两个组件，做两个常见的布局来测试你是否掌握了基本用法

# **垂直居中一个 300 * 300 固定宽高的组件**

需要注意以下点

Center 实现垂直居中
Container 置于 Center 下，宽与高才会生效

Center(
  child: Container(
    width: 300,
    height: 300,
    color: Colors.red,
  ),
);

# 垂直居中多行文字

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text('hello, world', textDirection: TextDirection.ltr),
      Text('hello, world', textDirection: TextDirection.ltr),
      Text('hello, world', textDirection: TextDirection.ltr),
    ],
  ),
);

# 左侧固定 50px，中间自适应，右侧固定 50px

Center(
  child: Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
        width: 80.0,
        color: Colors.red,
      ),
      Expanded(
        child: Container(
          color: Colors.white     
        )    
      ),
      Container(
        width: 80.0,
        color: Colors.blue,
      ),
    ],
  ),
);

# 平分5栏

Center(
  child: Row(
    textDirection: TextDirection.ltr,
    children: [
      Expanded(
        child: Container(
          color: Colors.white     
        )    
      ),
      Expanded(
        child: Container(
          color: Colors.red
        )    
      ),
      Expanded(
        child: Container(
          color: Colors.blue
        )    
      ),
      Expanded(
          child: Container(
            color: Colors.red
          )    
      ),
      Expanded(
          child: Container(
            color: Colors.white     
          )    
      ),
    ],
  )
);

# 手势

html 和 flutter 有一个重大区别就是 html 是由 div 组成的，而 flutter 是由各种组件组成的。

即使在 html 中强调语义化标签，现在也有 web component 标准，但他们大多数都可以由 div 模拟而来，监听同样的 click 事件

手势当属移动端交互最多的事件，而所有手势事件都在 GestureDetector 组件上进行监听。当然，如果你使用流行的组件库，它们已经给你把时间封装到了组件。

在 flutter 中有以下手势

Tap
Double tap
Long press
Vertical drag
Horizontal drag
Pan

# 状态

做了几个简单的布局之后，你会发现以上所有组件继承的都是 StatelessWidget，除此以外，还有另一种常用的组件 StatefulWidget。

见词生义，两个组件的不同在于是否本身有状态需要维护。在 React 中，Component 也有 Function Component 和 Class Component 之分。如果你之前写过 React，你就会很快理解两者的区别。

如何实现有状态的组件呢，有以下两点

有状态的组件需要实现两个类，StatefulWidget 和 State 的子类。
使用 setState 更改状态

# 生命周期

说到生命周期，就有一个随之而来的问题，数据请求应该在哪一个生命周期

initState
didChangeDependencies
build
didUpdateState
deactive
dispose

# Counter

Couter 在状态管理的地位快比得上编程语言里的 hello, world 了。以下实现一个 Counter 组件。

flutter create 出来直接就是一个 Counter 组件。

先来介绍一下什么是 Counter 组件

Counter 组件有一个按钮与一个数字组成
每点击一次按钮，数字加1

做一个最小化描述 Counter 的代码，再加一点样式。

setState

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return Counter();
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  // 状态都放在 State 的属性里边
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    // 设置垂直居中
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // +1 的按钮，被 GestureDetector 包裹监听事件
          GestureDetector(
            onTap: () {
              // 监听 Tap 事件，监听对 _count 进行自增
              setState(() {
                _count += 1;
              });
            },
            child: Container(
              child: Text('点击 +1', textDirection: TextDirection.ltr),
            ),
          ),
          Text(_count.toString(), textDirection: TextDirection.ltr)
        ]
      )
    );
  }
}

# 状态管理方案

Bloc
redux

# ValueNotifier

# 调试

通过以上学习布局，你时时需要查看组件的位置，大小，以及嵌套关系。通过以上学习组件状态管理，你需要时时打印数据，查看数据流向，甚至打断点

flutter 的调试如同前端一样分为两大块，UI 以及 Data。以下介绍 flutter 的调试

# 如何像 Devtool Inspector 一样定位元素

# 如何打印数据至控制台

你用的最多的调试手段是什么? print

打印数据到控制台是最简单，最直接的方法。在 flutter 中

# 路由

这里先回顾一下前端的路由是如何控制的？

前端路由通过 history API 控制跳转，在 flutter 中使用 Navigator 跳转。

# Navigator

正如 history API 一样，Navigator 使用 push 跳转路由，使用 pop 进行返回。

// 跳转路由
Navigator.push(
  context,
  // 一般使用 MaterialPageRoute 进行路由控制，当然你也可以自定义路由
  MaterialPageRoute(builder: (context) => SecondRoute()),
);

// 返回上一级
Navigator.pop(context);

以下是路由跳转的示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

# 路由传值

在前端中，路由可以通过 querystring 或者 pushState 进行参数传递，那么在 flutter 中如何进行路由传值呢。

在 flutter 中可以在跳转路由的 builder 函数中，把将要传递的值作为组件的参数进行传递。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondRoute(props)),
);

# 命名路由 (Named Routes)

在 SPA 应用中会使用，路径以及组件的对应表来管理路由，伪代码如下

const routes = {
  '/admin': Admin,
  '/user': User
}

在 flutter 中，可以在 MaterialApp 声明一个路径组件对应表，而路径即 Named Routes。

在页面间进行路由跳转时可以直接使用路径名称 Navigator.pushNamed(context, '/user')。

以下是一个命名路由的示例，来自官方。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    initialRoute: '/',
    routes: {
      '/': (context) => FirstScreen(),
      '/second': (context) => SecondScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

参考官方文档 Navigate with named routes (opens new window)

# 路由管理

在一个 flutter 应用中可以使用命名路由进行管理。也可以使用 fluro (opens new window) 统一管理路由。

# 包管理

现在我们已经掌握了组件，路由，状态的用法，已经可以写一个相对简单的应用了。但我们现在仅仅只在单文件中进行操作，且没有引入额外的库。而且，你肯定发现了文件首行的代码

import 'package:flutter/material.dart';

# 引入库 (Importing a Library)

在 Dart 中，引入官方库使用 dart:<library>，比如

import 'dart:convert';

而对于其它非Dart官方库，采用 package:<package>/<library>.dart，比如 flutter

import 'package:flutter/material.dart';

更多三方库可以在 https://pub.dartlang.org/flutter 上查找

import 'package:url_launcher/url_launcher.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

在 Dart 中有很烦的一点是你当你使用某个 API 的时候，你不知道它出自与哪个库去，这时候你可以在引入库的时候使用 json 显式标明。

import 'dart:convert' show json;

在使用第三方库之前还需要引用依赖，并安装，进行包管理

# 如何引入另一个文件

以上引入的都是第三方库或者官方的一些库，如果需要引入本地路径下的文件呢。

参考 How to reference another file in Dart? (opens new window)

# 依赖

在学习 flutter 的包管理工具之前，先回顾一下 node 的包管理工具 npm。

npm 使用 package.json 管理包，使用 package-lock.json 锁定包的版本，避免开发环境与生产环境的不一致。

而在 flutter 中，也有同样功能的两个文件。他们的版本号也同样遵守 Semantic Versioning (opens new window)

pubspec.yaml 👉 package.json
pubspec.lock 👉 package-lock.json

在使用第三方库之前，还需要 手动编辑 pubspec.yaml 添加依赖

dependencies:
  url_launcher: ^5.0.2

然后进行安装

flutter packages get

# Permission API

PACKAGE_USAGE_STATS

<uses-permission
  android:name="android.permission.PACKAGE_USAGE_STATS"
  tools:ignore="ProtectedPermissions" />

# http 请求

flutter 作为移动端框架，更多时候需要服务器的支持，一个 http 请求库此时应是登场的时候了。

你对一个 http 请求库的了解程度取决于你对 http protocol 的了解程度，需要使用时直接查找文档即可。这里仅仅列出它如何发送最为常见的 GET 和 POST 请求。

http 请求属于异步操作，返回一个 Future。如果你对此概念感到陌生，你需要往上翻，复习一下 Future 的用法。

这里介绍一个国人写的请求库 dio，为了能够使用它，这里首先介绍一下包管理器。

编辑 pubspec.yaml，添加依赖库 dio

dependencies:
  flutter:
    sdk: flutter
  dio: ^2.1.0

接下来 flutter packages get 装包，重启，完成了 dio 的安装。

在需要的文件中，引入它

import 'package:dio/dio.dart';

# Dio

Response response;
Dio dio = new Dio();

response = await dio.get('/')
response = await dio.post('https://shici.xiange.tech/graphql', data: { 'query': '{ping}' });

// {"data":{"ping":"pong"}}
print(response)

// 'pong'
print(response.data['data']['ping']);

# JSON

dart 的 JSON 处理实在是丧心病狂了，相当怀念 js，不过也没办法，毕竟 JSON 的全称是 JavaScript Object Notation。

import 'dart:convert' show json;

var s = '{"name": "shanyue"}'

Map<String, dynamic> user = json.decode(s);

print(user['name'])

其实作为以前写 python 和 javascript 的我表示完全无所谓...

# StreamBuilder && FutureBuilder

想象一个经典场景，当加载数据时显示加载状态，加载完成后正常显示数据。按照以前的思路，使用 jsx 做了伪代码如下

{
  loading <Loading /> : <Page />
}

不过在 flutter 中可以使用 FutureBuilder 来进行实现

# Memoization

# 存储

# key/value 存储

package -> shared_preferences

import 'package:shared_preferences/shared_preferences.dart';

SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt('count', 100);
final count = prefs.getInt('counter');

# database

package -> sqflite

# 参考

关于山月

我的项目：

我的微信：shanyue94，欢迎交流