flutter-logo.png

什么是flutter

• google 推出的跨平台UI框架

环境搭建(MAC环境)

• Flutter 依赖下面这些命令行工具

bash, mkdir, rm, git, curl, unzip, which

获取Flutter SDK

• flutter官网下载其最新可用的安装包

• 安装包下载完成则可以进行解压

unzip /指定解压目录/flutter_macos_v1.9.1+hotfix.4-stable.zip

• 解压完成之后我们会在解压好的目录下会多出一个flutter目录，获取并记住该目录路径，下一步我们会用到

# 使用pwd 命令查看目录路径
/Users/XXXXX/development/flutter

设置环境变量

• 设置环境变量目的是以便我们可以运行flutter命令在任何终端会话中

• 确定Flutter SDK的目录，上一步我们解压获取了flutter的路径/Users/XXXXX/development/flutter

• 打开(或创建) HOME 指的是 路径是 /Users/用户名XX/ ）

vim $HOME/.bash_profile

• 文件加入环境变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
//
export PATH=/Users/XXXXX/development/flutter/bin:$PATH

• 最后我们执行创建好的.bash_profile文件

source $HOME/.bash_profile
注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

• flutter dev 网站

执行 flutter docter 检查本机软件环境，没安装的插件根据提示安装就行了

flutter doctor

运行flutter-doctor命令.png

手动升级 Flutter

• flutter 版本升级迭代很快，前面我们下载SDK默认是stable分支，也就是稳定版，如何手动升级呢？只需要下面一条flutter命令

flutter upgrade

Dart 语法

logo-dart.png

• 我们知道Flutter框架是使用Dart 语言来编写的，Dart 是一个面向对象编程语言， 每个对象都是一个类的实例，所有的类都继承于 Object.如果熟悉Java，语言是很容易上手的。首先来熟悉一下Dart语法

Dart 变量

• var 声明变量，和 kt 、js语法很像，需要注意的是如下示例 name 只要复制字符串，则他就是String类型，number就是int 类型，不能再更改它的类型，而没有初始化的变量自动获取一个默认值为 null。

var name = 'maoqitian';
var number = 1;

Dart 常量

• final 和 const声明都是表示常量，一个 final 变量只能赋值一次，可以省略变量类型，如下声明一个存放WordPair值的List 数组

final List _suggestions = new List<WordPair>();

final _suggestions = <WordPair>[];

• const 关键字不仅仅只用来定义常量， 也可以用来创建不变的值

//如下定义一个字体大小的值一直都是 18 ，不会改变
final _biggerFont = const TextStyle(fontSize: 18.0)

final 和 const区别

• const 的值在编译期确定，final 的值要到运行时才确定

Dart 函数方法

• Dart 是一个真正的面向对象语言，方法也是对象他的类型是 Function。 这意味着，方法可以赋值给变量，也可以当做其他方法的参数。

//定义一个返回 bool(布尔)类型的方法 
bool isNoble(int atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}
//转换如下可以忽略类型定义
isNoble(atomicNumber) {
  return _nobleGases[atomicNumber] != null;
}

//只有一个表达式的方法，你可以选择 使用缩写语法来定义
// => expr 语法是 { return expr; } 形式的缩写
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

Dart 方法参数

• 方法可以定义两种类型的参数：必需的和可选的。 必需的参数在参数列表前面， 后面是可选参数，必选参数没啥好说的，我们来了解可选参数。可选参数可以是自己命名参数或者基于可选位置的参数，但是这两种参数不能同时当做可选参数来一起用。

可选命名参数

• 调用可选命名参数方法的时候可以使用 paramName: value （key:value形式，只不是过key 是参数名称）来指定参数值

//调用有可选命名参数方法 playGames
playGames(bold: true, hidden: false);

//playGames 方法
playGames({bool bold, bool hidden}) {
  // ...
}

可选位置参数

• 方法参数列表中用[]修饰的参数就是可选位置参数

// 定义可选位置参数方法
String playGames (String from, String msg, [String sports]) {
  var result = '$from suggest $msg';
  if (sports != null) {
    result = '$result playing $sports together';
  }
  return result;
}
 
// 不用可选参数 
playGames('Bob', 'Howdy'); // 返回值 Bob suggest Howdy

//使用可选参数
playGames('I', 'Xiao Ming', 'basketball'); //返回值 I suggest Xiao Ming playing basketball together.

Dart 方法参数默认值

• 在定义方法的时候，可以使用 = 来定义可选参数的默认值。 默认值只能是编译时常量。 如果没有提供默认值，则默认值为 null

// 定义可选位置参数方法
String playGames (String from , String msg, [String sports = 'football']) {
  var result = '$from suggest $msg';
  if (sports != null) {
    result = '$result playing $sports together';
  }
  return result;
}

playGames('I', 'Xiao Ming'); //返回值 I suggest Xiao Ming playing football together.

入口函数（The main() function）

• 每个应用都需要有个顶级的 main() 入口方法才能执行

// Android studio 创建Demo 项目  main.dart 文件开头 
void main() => runApp(MyApp());

//可以转换为
void main(){
    runApp(MyApp());
}

异步操作

• async 方法和 await 异步操作，直接看看一个网络请求例子就能够了解

static Future<ArticleListData> getArticleData(int pageNum) async{
    String path = '/article/list/$pageNum/json';
    Response response = await HttpUtils.get(Api.BASE_URL+path);
    ArticleBaseData articleBaseData = ArticleBaseData.fromJson(response.data);
    return articleBaseData.data;
  }

先了解这么多，更多Dart 相关内容可以查看Dart语言官网

Flutter

官方文档

• flutter.dev
• Flutter中文网

Flutter Hello world

• 在开始Flutter Hello world程序之前，作为一名Android 开发者，首先我们要认识到Flutter中没有原生开发的XML，所有界面和逻辑代码都在.dart文件中，Flutter给我提供了一套视觉、结构、平台、和交互式的Widgets，所以在Flutter中一构架的一切界面都是Widgets。接下来我们先看一个简单的Hello World Flutter应用。

• Android Studio 新建Flutter demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent,
      ),
      home: new Scaffold(
        appBar: new AppBar(
            title: new Center(
              child: new Text("Welcome to Flutter"),
            )
        ),
        body: DemoStatelessWidget("Flutter Hello World ! 无状态的Widget"), 
      ),
    );
  }

}

//无状态 Widget
class DemoStatelessWidget extends StatelessWidget{

  final String text;

  //构造方法传入 text 值
  DemoStatelessWidget(this.text);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      constraints: BoxConstraints.expand(
        height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
      ),
      padding: const EdgeInsets.all(8.0),
      color: Colors.blue[600],
      alignment: Alignment.center,
      child: Text(text,
          style: Theme.of(context)
              .textTheme
              .display1
              .copyWith(color: Colors.white)),
      transform: Matrix4.rotationZ(0.1),
    );
  }
}

• 运行结果

Flutter Hello world.jpg

• 如上代码所示，首先main函数运行MyApp，MyApp 是一个DemoStatelessWidget，字面可以理解为一个没有状态的Widget，他的build 方法创建了MaterialApp这个Widget才使得应用可以跑在手机上，接着创建了Scaffold 这个Widget，可以让我们创建AppBar和页面内容，body 的页面内容又包含了一个无状态的DemoStatelessWidget，通过构造方法可以传入我们想要现实的页面内容，该widget包含白色背景和一个现实文字的Text widget。

Flutter ListView

• 上个小例子中我们提到无状态 StatelessWidget，想必也能猜到，肯定会有一个有状态的widget，这个widget就是StatefulWidget，该widget为何说是有状态的呢，主要是在其管理的State中我们可以调用setState来动态改变页面显示。接着我们看一个显示数据列表的例子，并加入一个可以点击收藏的按钮。

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

// StatelessWidget 无状态的widget
class MyApp extends StatelessWidget { //Stateless widgets是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //title: 'Welcome to Flutter',
      theme: ThemeData(
        primaryColor: Colors.blueAccent,
      ),
     home: new RandomWords(),
    );
  }
}

//StatefulWidget 有状态的widget
class RandomWords extends StatefulWidget{
  @override
  createState() => new RandomWordsState();
}

// 返回 显示单词对的ListView Widget
class RandomWordsState extends State<RandomWords> {
  //保存建议的单词对列表(变量以下划线（_）开头，在Dart语言中使用下划线前缀标识符，会强制其变成私有的)  final _suggestions = <WordPair>[];
  final List _suggestions = new List<WordPair>();
  //设置字体大小的变量
  final _biggerFont = const TextStyle(fontSize: 18.0);
  // 保存喜欢单词组的集合 set 集合不允许值重复
  final Set _saved = new Set<WordPair>();

  /// State 生命周期方法
  @override
  void initState() {
    // state 初始化
    super.initState();
  }

  @override
  void didChangeDependencies() {
    // 在 initState 之后调用，此时可以获取其他 State
    super.didChangeDependencies();
  }

  @override
  void dispose() {
    // state 销毁
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //return new Text(new WordPair.random().asPascalCase);
    //返回单词对的ListView。
    return new Scaffold(
      appBar: new AppBar(
        title:new Center( //居中显示
          child: new Text('Flutter ListView'),
        ),
      ),
      body: _buildSuggestions(),
    );
  }
  
  //构建显示建议单词对的ListView。
  Widget _buildSuggestions(){
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
        // 在偶数行，该函数会为单词对添加一个ListTile row.
        // 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。

        //itemBuilder 值是一个匿名回调函数， 接受两个参数- BuildContext和行迭代器i。迭代器从0开始，
        // 每调用一次该函数，i就会自增1，对于每个建议的单词对都会执行一次。该模型允许建议的单词对列表在用户滚动时无限增长。
          itemBuilder: (context,i){
          // 在每一列之前，添加一个1像素高的分隔线widget
          if(i.isOdd) return new Divider();
          // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
          // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
          final index = i~/2;
          
          if(index >= _suggestions.length){
            //  如果是建议单词列表中最后一个单词对 接着再生成10个单词对，然后添加到建议列表
            _suggestions.addAll(generateWordPairs().take(10));
          }

          return _buildRow(_suggestions[index]);
        }
    );
  }
  //创建 ListTile中显示每个新词对
  Widget _buildRow(WordPair suggestion) {
    //获取是否保存了该单词状态
    final isSaved = _saved.contains(suggestion);

    return new ListTile(
      // 设置 标题
      title: new Text(
        suggestion.asPascalCase,
        style: _biggerFont,
      ),
      //图标
      trailing: new Icon(
        //星型图标状态
        isSaved ? Icons.favorite : Icons.favorite_border,
        color: isSaved ? Colors.deepOrange : null ,
      ),
      onTap: (){  // 当用户点击 ListTile 击时， ListTile 会调用它的onTap回调
        setState(() { //调用setState() 会为State对象触发build()方法，从而导致对UI的更新
          if(isSaved){
             _saved.remove(suggestion);
          }else{
            _saved.add(suggestion);
          }
        });
      },
    );
  }
}

• 运行效果

Flutter ListView.jpg

• 如上代码，将原来的无状态Widget改成了StatefulWidget，并在build中构建ListView，到此你可能有疑惑，不是说有状态的Widget，怎么还是创建Widget，有状态如何体现呢? 别急，我们看到_buildRow方法，方法中构建了ListTile 这个Widget，它响应点击事件回到为onTap方法，也就是当我们点击ListTile，我们在onTap方法中就可以调用setState方法来动态改变页面显示，也就是改变桃心收藏按钮变化（注意setState方法需要在State类中才能调用）。

• State 是有周期的，其中包括三个函数：

1. initState()：初始化方法
2. didChangeDependencies()：在 initState 之后调用，此时可以获取其他 State
3. dispose()：state 销毁

• 如果你使用Android Studio 我们可以使用快捷键快速创建StatelessWidget和StatefulWidget，创建StatelessWidget快捷键为stl，创建StatefulWidget快捷键为stf。

小节总结

• Flutter 页面都是由一个个 widget 搭建而来的
• widget类型有两种，一种是无状态页面内容固定的StatelessWidget，一种是页面内容可以动态改变的 StatefulWidget

Widget 速览

• 在开始开发实战之前，我们需要对基本常用的Widget有个大概的认识。

layout Widget

• 在刚开始写原生界面的时候，我们最先了解的也应该是布局，Flutter 也提供了不少布局widget，接下来列举一些常用的布局widget

• 了解更多的widget请参考 Flutter widget 目录.

界面 Widget

• 有了布局，还需要在布局中填放各种控件，才最终组成我们的页面，比如我们开发Material Design 风格的App，Flutter 就给我们提供了Material Components Widgets，接下来选取一些常用的控件来了解。了解更多的widget请参考 Material Components Widgets 目录。

导航栏返回按钮监听

• WillPopScope ，Flutter中可以通过WillPopScope来实现返回按钮拦截
• 以下示例提供两种效果，双击返回Toast提示（Toast库 fluttertoast: ^3.1.3），或者弹出提示dialog是否退出。

import 'package:flutter/material.dart';

class AppPage extends StatefulWidget {
  @override
  _AppPageState createState() => _AppPageState();
}

class _AppPageState extends State<AppPage> {
    @override
  Widget build(BuildContext context) {
    return WillPopScope( ///通过WillPopScope 嵌套，可以用于监听处理 Android 返回键的逻辑。 WillPopScope 并不是监听返回按键，只是当前页面将要被pop时触发的回调
        child: Container(),
        onWillPop: () async{
           return _doubleExitApp();
        }
    );
  }
  
  //双击返回 退出应用
  bool _doubleExitApp(){
    if (_lastPressedAt == null ||
        DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
      ToolUtils.ShowToast(msg: "再点一次退出应用");
      //两次点击间隔超过1秒则重新计时
      _lastPressedAt = DateTime.now();
      return false;
    }
    //应用关闭直接取消 Toast
    Fluttertoast.cancel();
    return true;
}


  ///如果返回 return new Future.value(false); popped 就不会被处理
  ///如果返回 return new Future.value(true); popped 就会触发
  ///这里可以通过 showDialog 弹出确定框，在返回时通过 Navigator.of(context).pop(true);决定是否退出
  /// 单击提示退出
  Future<bool> _dialogExitApp(BuildContext context) {
    return showDialog(
        context: context,
        builder: (context) => new AlertDialog(
          content: new Text("是否退出"),
          actions: <Widget>[
            new FlatButton(onPressed: () => Navigator.of(context).pop(false), child:  new Text("取消")),
            new FlatButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: new Text("确定"))
          ],
        ));
  }
  
}

最后

• 万事开头难，对于Flutter到此可以说是迈出了第一步，对于未尝试的东西，开始可能会有畏惧心理，但只要敢于尝试，敢于迈出第一步，相信难不难只在于自己的用心程度而言。本篇文章就先到这里，文章中如果有错误，请大家给我提出来，大家一起学习进步，如果觉得我的文章给予你帮助，也请给我一个喜欢和关注，同时也欢迎访问我的个人博客。
• Flutter完整开源项目： https://github.com/maoqitian/flutter_wanandroid

参考

• Flutter 官方网站
• Flutter中文网
• Dart 官方网站
• Dart 语言中文网

About me

blog：

• 个人博客
• 掘金
• 简书
• Github

mail：

• maoqitian@gmail.com
• maoqitian068@163.com

运行flutter-doctor命令.png