Flutter实战一：环境搭建及apk编译安装

应项目需要，需要开发一款高性能的应用，最终选了Flutter，以此系列文章记录。

1.开发环境搭建

Flutter开发可以使用AndroidStudio或者VSCode，这两个环境都有安装，下面主要以VSCode为例，VSCode环境搭建可以参考之前的文章《Ionic实战十九：新系统之环境搭建》，第五步及第九步可不执行。

安装完这些环境之后再安装Flutter SDK，SDK下载地址：https://flutter.cn/docs/get-started/install/windows，将下载的sdk解压到本地目录下如下：

将flutter添加到Path环境变量中如下：

再cmd或者终端中输入flutter doctor命令查看是否成功配置flutter，成功标识如下：

2.在VSCode中安装Flutter插件

打开vscode，在扩展中输入Flutter，选择第一个安装如下图：

3.创建Flutter项目

在vscode中打开终端，cd到flutter的工作目录后，执行 flutter create flutterapp进行创建flutterapp项目，注意，项目名只能为小写+下划线+数字，并且不能以数字开头，项目名中包含大写英文字母是不支持的。

4.运行Hello World

项目创建完成后，我们在lib目录下找到main.dart文件打开，将页面中所有代码删除后，添加如下代码实现Hello World

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }}

然后在终端中执行flutter run选择浏览器或者直接执行flutter run -d chrome运行到chrome浏览器中查看运行结果如下：

5.项目打包

项目成功在浏览器运行后，我们对项目打包下，确保项目环境都安装成功。
执行flutter build apk即可，打包成功如下：

将安装包安装到模拟器中看下效果如下

6.实现列表及点击跳转页面

下面集成下官方的示例列表体验下，效果如下：

lib/main.dart中代码：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Scaffold AppBar Title111',
      theme: new ThemeData(
        primaryColor: Colors.green[600]
      ),
      home: new RandomWords(),
      // home: new Scaffold(
      //   appBar: new AppBar(
      //     title: new Text('Title'),
      //   ),
      //   body: new Center(
      //     child: new RandomWords(),
      //   ),
      // ),
    );
  }
}
class RandomWords extends StatefulWidget {
  createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
    // final wordPair = new WordPair.random();
    // return new Text(wordPair.asPascalCase);
    void _pushSaved() {
      Navigator.of(context).push(
        new MaterialPageRoute(
          builder: (context) {
            final tiles = _saved.map(
              (pair) {
                return new ListTile(
                  title: new Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              },
            );
            final divided = ListTile.divideTiles(
              context: context,
              tiles: tiles,
            ).toList();
            return new Scaffold(
              appBar: new AppBar(
                title: new Text('Saved Suggestions'),
              ),
              body: new ListView(children: divided),
            );
          },
        ),
      );
    }
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Scaffold AppBar Title222'),
        actions: <Widget>[
          new IconButton(onPressed: _pushSaved, icon: new Icon(Icons.list))
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();
        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }
  Widget _buildRow(WordPair wordPair) {
    final alreadySaved = _saved.contains(wordPair);
    return new ListTile(
      title: new Text(
        wordPair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(wordPair);
          } else {
            _saved.add(wordPair);
          }
        });
      },
    );
  }
}

pubspec.yaml中引入包如下：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  english_words: ^4.0.0

注意english_words最新版本可以通过https://pub.flutter-io.cn/packages/english_words/install查看，4.0.0版本之后的支持null-safety

对不支持的插件可以执行flutter run --no-sound-null-safety使项目运行

7.热重载的使用

项目运行是执行的命令flutter run，如下

页面展示如下：

下面我们修改下Title改为Title222如下：

代码修改后ctrl+s保存，在vscode终端中输入r即可使热重载生效，具体如下：

然后会发现页面标题更改了

最后执行flutter build apk打包后安装到模拟器上看下效果如下：