【贰】第一个flutter程序

打开虚拟机

在创建之前，可以先打开一个android虚拟机，也可以用USB将手机连接到电脑，打开卡发着模式的USB调试，用于调试

创建第一个flutter程序

打开vscode

利用快捷键ctrl+shift+p打开命令行

键入flutter，选择new project

键入项目名称

选择项目目录

flutter会生成一个默认的项目框架，以及计数器实例，等加载完成，趁热直接点击F5进行调试，等待（好大）一会儿，效果如下，这是一个完整的可运行的app，点击加号，计数器会累加。

注意：如果无法运行，可以ctrl+shift+p，然后运行flutter doctor查看环境是否正确。

体验热重载

如果每次修改代码之后都重新启动调试的速度很慢，热重载即可以在程序运行过程中，直接将组建替换成最新的代码编译的文件，并重绘ui，非常方便，将代码修改一下

home: MyHomePage(title: ‘Flutter Demo Home Page’),

改为

home: MyHomePage(title: ‘the first flutter app’),

ctrl+s保存，会触发热重载，看虚拟机上的标题，已经修改了。

查看flutter代码结构

• flutter默认生成的代码结构如图，lib下放代码，flutter程序入口是main。
• 可以自己新建目录，保存其他资源如图片、等。
• pubspec.yaml是flutter项目的配置文件。

pubspec.yaml

把注释稍微去一下看着很清晰，内容不多，而且字段基本上是自解释的。其中常用的有

• dependencies：添加依赖
• assert：声明静态文件
• fonts：声明字体

name: first_flutter 
description: A new Flutter project.   
version: 1.0.0+1   
environment:
  sdk: ">=2.1.0 <3.0.0"
dependencies:    #依赖
  flutter:               #添加flutter sdk依赖
    sdk: flutter
  cupertino_icons: ^0.1.2  #添加图标依赖
  other:^0.1.1     #添加其他依赖（比较常用）

dev_dependencies:         
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true

  assets:                 #静态资源声明（比较常用）
   - images/a_dot_burr.jpeg
   - images/a_dot_ham.jpeg

  fonts:      #字体声明
     - family: Schyler
       fonts:
         - asset: fonts/Schyler-Regular.ttf
         - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
         - asset: fonts/TrajanPro.ttf
         - asset: fonts/TrajanPro_Bold.ttf
           weight: 700

##第一个fulutter代码分析
把注释一去发现没几行代码

导入包，这里导入的是flutter原生的material包

import 'package:flutter/material.dart';

程序入口函数main，说实话我个人觉得dart语言的单行函数这个设计真的有点憋足。

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

同

void main() {
     runApp(MyApp());
}

创建app类，继承自一个statelesswidget（无状态组件），在flutter中，万物皆widget（组件），每个组件都有一个build方法，用于生成该组件，如下build的函数中返回一个MaterialApp。括号里是命名参数，包括title（标题），theme（主题），home（主体）。
个人认为flutter编程的主要的工作就是要实现一个组件，来填充home参数，而flutter编程，就是组件的嵌套。

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

接下来就是实现home这个组件,这里实现的是一个继承自statefulwidget（有状态组件）的组件，关于有状态和无状态组件，有缘再说，记住有状态组件是可变的，无状态组件是不可变的，二者可以相互嵌套。

• 有状态组件有固定写法，甚至vscode插件（Awesome Flutter Snippets）提供了快捷键（输入stf然后回车）自动生成。
• 有状态组件没有具体的ui，它维护的是一系列状态（state），这些状态可以在适当的时间用其build方法生成一个widget。
• 有状态组件的状态是自定义的，并且可以改变（通过状态类的setState方法来改变），开发有状态组件，主要工作是状态维护（在适当的时间调用setState方法）。

如下，固定写法就不多说了，写多了会自己领悟的，下例中，状态改变由FloatingActionButton的点击回调触发。
另外Scaffold，AppBar，Center，Column，甚至MainAxisAlignment等，都是flutter已经实现的一些组件，可以直接使用，后续有缘会详细介绍这些组件。

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(() {
      _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),
      ), 
    );
  }
}

flutter提供了很多组件，学习flutter最基础的工作之一，就是把这些组件熟练掌握。

到此，第一个flutter程序学习完毕，感觉flutter还是比较简单的额。