Flutter——一：新建并分析Flutter默认计数器应用Demo

注：笔者的Flutter是以AndroidStudio为开发工具编写的

一：创建项目

1.搭建Flutter开发环境，在AS上安装Flutter及dart插件等都在Flutter中文网上有详细步骤。
2.当开发环境都配置好后，在AS上新建项目就会多出一个New Flutter Project选项，点击创建项目，详细步骤如下四图：

二：分析默认Demo

运行效果图
这是默认Demo的效果图，点击右下角+号一下 会使视图中间的数字+1.

源码及详细注释

/**
 * 导包
 * 官方：Flutter支持使用由其他开发者贡献给Flutter和Dart生态系统的共享软件包。这使您可以快速构建应用程序，而无需从头开始开发所有应用程序。
 * 换句话说就是你可以直接使用现成的代码 而不是自己去一点一点敲出来
 */
import 'package:flutter/material.dart';

///
/// 应用入口
/// main()函数：应用程序的入口 runApp()方法：启动Flutter应用 MyApp()：该应用创建时应用名为MyApp
/// 该行代码的意思就是main()函数调用了runApp()方法去启动MyApp应用
///
void main() => runApp(MyApp());

///应用结构：Flutter中大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)。
///-------------------------------------------------------------总体框架---------------------------------------------------------------------
///Stateful widget（有状态的）和Stateless widget（无状态的，不可变的）
class MyApp extends StatelessWidget {//Myapp类继承于StatelessWidget类，意味着应用本身也是一个widget。
///build方法：构建UI界面时调用，Widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）。
  @override
  Widget build(BuildContext context) {
    ///MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个widget。
    return MaterialApp(
      title: 'Flutter Demo',//名称
      theme: ThemeData(//主题
        primarySwatch: Colors.blue,
      ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),//路由跳转到MyHomePage（title），带参数传递
    );
  }
}
///-------------------------------------------------------------------------------------------------------------------------------------------

///----------------------------------------------------------首页------------------------------------------------------------------------------
class MyHomePage extends StatefulWidget {//MyHomePage继承自StatefulWidget类
  MyHomePage({Key key, this.title}) : super(key: key);//含title参数，由MyApp传递数据过来

  final String title;

  ///由于是StatefulWidget（有状态的） 生成一个状态类
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
///----------------------------------------------------------------------------------------------------------------------------------------

///--------------------------------------------------------首页对应的状态类------------------------------------------------------------
class _MyHomePageState extends State<MyHomePage> {///状态类:由于状态是保存在State中的，所以将build放在状态类便于读取状态和构建界面
  int _counter = 0;//状态

  void _incrementCounter() {//状态的自增函数：每调用一次，_counter+1
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    ///Scaffold 是Material库中提供的页面脚手架，它包含导航栏（appBar）和Body以及FloatingActionButton（如果需要的话）。
    return Scaffold(
      appBar: AppBar(//导航栏
        title: Text(widget.title),
      ),
      body: Center(//Body：内容，最外层是Center widget，Center可以将其子widget树对齐到屏幕中心
        child: Column(//Center子widget是一个Column widget，Column的作用是将其所有子widget沿屏幕垂直方向依次排列
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[//Column包含两个 Text子widget
            Text(//第一个Text widget显示固定文本 “You have pushed the button this many times:”
              'You have pushed the button this many times:',
            ),
            Text(//第二个Text widget显示_counter状态的数值
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(//floatingActionButton是页面右下角的带“➕”的悬浮按钮
        onPressed: _incrementCounter,//接受一个回调函数，点击后调用_incrementCounter
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}