环境搭建

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面

Flutter具体信息可以参考以下文章：

初探Flutter，初步解析Flutter，可实现安卓ios统一开发。还有谷歌的Fuchsia系统

Flutter环境搭建

原生搭建

镜像搭建

由于在编译工程的时候要下载一些必须的文件会很慢，所以google提供了代理镜像:

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1	此电脑 -> 高级系统设置 -> 环境变量 -> 系统变量

分别新建变量名为PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL，值为https://pub.flutter-io.cn 和https://storage.flutter-io.cn的环境变量

还有一种方法是打开VPN开启全局代理。

下载SDK

SDK下载地址

下载好后将压缩包内容解压到你想将Flutter存放的目录。

编译运行工程

在根目录会看到一个叫flutter_console.bat文件，打开该文件。

在根目录中会有一个examples的文件夹，里面存放有几个实例，将目录切换到对应实例工程的目录路径中：

cd examples/hello_world

然后执行命令编译并运行程序

注意：需要连接手机设备并设置为开发者模式否则会提示No connected devices

在运行完成后会有一句提示

To hot reload changes while running, press “r”. To hot restart (and rebuild state), press “R”.

即可以输入r可执行热加载，执行R可实现热重启

1	flutter run

即可编译运行该工程

IDE搭建

选用Android Studio

安装插件

setting -> plugins

搜索flutter并安装，安装完成后需要配置flutter和dart的sdk path：

File | Settings | Languages & Frameworks

只需选择flutter存放的根目录

Flutter实例

以Android Studio作为编译工具

新建Flutter工程，在新建窗口选择Flutter SDK Path同样是Flutter所在的根目录

注意：工程名不能出现大写字母

main.dart：

import 'package:first_flutter/view/FirstPage.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Flutter Demo Homer Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      Navigator.push(context,
          MaterialPageRoute(builder: (context) => FirstPage())
      );
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

程序入口，第一个打开的页面

以上dart首先在MyApp类中定义了主题色，标题等

然后需要创建两个创建widget必须有的类：分别继承了StatefulWidget和State的两个类MyHomePage和_MyHomePageState

在_MyHomePageState类的重写方法中定义了appBar，body和floatingActionButton三个Widget，当用户点击了floatingActionButton按钮会调用_incrementCounter方法实现_counter自增1且跳转到FirstPage页面

FirstPage.dart：

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget{
  BuildContext context;
  @override
  Widget build(BuildContext context) {
    this.context=context;
    return new MaterialApp(
      title: "my first_page",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("first_page"),
        ),
        body: new Center(
            child: new RandomWords(),
        ),
          floatingActionButton: FloatingActionButton(
            onPressed: _popMainPage,
            tooltip: "Increment",
            child: Icon(Icons.ac_unit),
          )
      ),
    );
  }
  _popMainPage(){
    Navigator.pop(context);
  }
}
class RandomWords extends StatefulWidget{
  @override
  createState()=>new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final TextStyle _biggerFont = new TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      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 pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

FirstPage创建了一个内容为随机字母（通过开源包english_words）的无限ListView。

同上，在本页面中RandomWords继承了StatefulWidget通过重写createState方法实例化继承了State的RandomWordsState类，在该类重写方法build中调用_buildSuggestions方法创建Widget。

开源包引入方法为：

打开project目录下的pubspeck.yaml文件：

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  english_words: ^3.1.0