Happy Flutter-计数器示例

Dart基本语法学的差不多了以后就可以开始学习Flutter了，就像OC学完了就可以开发iOS一样，触类旁通，Flutter开发需要掌握的基本技能无外乎也是那几个东西，界面布局，网络请求，数据加载，第三方库的使用，学会这些基本可以完成一些简单的Flutter模块的开发了，写文章是为了记录，学习语言最主要的还是得多敲多练，在实战中磨炼才是王道。

配环境创建项目啥的就不讲了，是需要花一点时间，也有一些坑，下次要是再有重新搭环境的机会可以把坑记录一下。

1.Hello World

每次学一门新语言的时候，打印出来Hello World的那一刻我就感觉这门语言我已经学会了。

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

main(List args) {
  runApp(
      Text("Hello World", 
           textDirection: TextDirection.ltr
      )
  );
}

这段代码执行后会在屏幕左上角显示Hello World。
对这段代码稍微分析一下：
1.import package:flutter/material.dart此行代码作用是导入了Material UI组件库，Material是一种标准的移动端和web端的视觉设计语言， Flutter默认提供了一套丰富的Material风格的UI组件。
2.应用入口是一个main函数，和OC一样，main函数里调用了runApp()方法，runApp()方法接收一个widget参数，这个widget就是Flutter的核心所在。
3.在Flutter里可以说一切能看见的东西都是widget，翻译过来叫做组件。
4.Text组件类似于OC中的UILabel，可以展示文字，它的类定义如下：

class Text extends StatelessWidget {
  const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  });
}

利用前面学到的Dart知识可以看到，这个Text类继承自一个叫StatelessWidget的东西，它有一个常量构造方法，接收一个必传参数data，和一堆命名可选参数，关于widget后面再细讲。

2.计数器应用示例

官网为我们提供了一个计数器程序示例，该计数器示例中，每点击一次右下角带“+”号的悬浮按钮，屏幕中央的数字就会加1。

计数器

这段程序代码如下：
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

1. 这个程序的runApp返回的是一个MyApp类，MyApp类代表Flutter应用，它继承了StatelessWidget类，这也就意味着应用本身也是一个widget。
2. MyApp类内部调用了build方法，Flutter在构建页面时，会调用组件的build方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）。
3. build方法内部又返回了一个MaterialApp，它是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。同样的，MaterialApp也是一个widget。
4. MaterialApp接收一个home参数，传入的是MyHomePage，继承自StatefulWidget，到这里我们已经见到了两种常用的widget类型，StatelessWidget和StatefulWidget。
5. 在MyHomePage类里初始化赋值了一个_MyHomePageState的类，这个类继承自State ，字面意思就是一种状态，从这里也可以初步分析出来Statefulwidget是包含状态变化的。
6. _MyHomePageState类中同样包含了一个build方法，从这里也可以初步看出来，StatelessWidget的build方法是直接包含在widget类中的，而Statefulwidget的build方法是在State类中的，这两点也是两种widget的显著不同，后面再细讲。
7. _MyHomepage类中有一个记录点击次数的变量counter和一个_incrementCounter方法，方法里调用了setState()方法，刷新counter的值，setState方法的作用是通知Flutter框架，有状态发生了改变，Flutter框架收到通知后，会执行build方法来根据新的状态重新构建界面， Flutter 对此方法做了优化，使重新执行变的很快，所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget。
8. build方法返回了一个Scaffold的东西，这个翻译过来是个脚手架的意思，它提供了默认的导航栏、标题和包含主屏幕widget树的body属性，这个就像盖楼时候的脚手架一样，你可以用这个脚手架构建不同的楼层，也就是App页面的大体框架。
9. 脚手架里包含了一个body和floatingActionButton属性，body里展示了两段text，分别是一段文字和计数器的次数，floatingActionButton就是右下角的那个加号按钮，按钮的onPressed回调传入的是_incrementCounter方法，也就是让_counter++。

现在，我们将整个计数器执行流程串起来：当右下角的floatingActionButton按钮被点击之后，会调用_incrementCounter方法。在_incrementCounter方法中，首先会自增_counter计数器（状态），然后setState会通知Flutter框架状态发生变化，接着，Flutter框架会调用build方法以新的状态重新构建UI，最终显示在设备屏幕上。

至此一个简单的Flutter页面讲解完了，看了一下其实也能读懂，和iOS一样，跟界面打交道最难的是要用一些系统提供的基本组件和自定义的组件来完成各种各样的布局，Flutter和iOS不同的是，他的系统为我们提供了很多现成的组件，很多稍微复杂的布局可以直接使用，提供给我们更多的API，写起来非常轻松，但官方提供给我们这些便利的同时也带给我们了解这些各式各样widget的难度，widget的数量繁多，需要我们花更多的时间去学习和运用这些widget，最终能够在不同的场景熟练运用不同的widget，大概先说这些。

参考资料：
Flutter实战