【貳】第一個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還是比較簡單的額。