創建項目

1. 打開vscode
   
   輸入 flutter 選擇 New Project
   
   
   選擇一個用于在里頭創建項目的文件夾
   
   給項目取個名字（不要用大寫），按回車即可。
   
   稍等一會，項目便會創建成功，輸出下方內容，表示創建成功！
   

運行項目

啟動模擬器

點擊右下角的 No Device

選擇搭建開發環境時，已創建好的模擬器


若屏幕如上圖，則模擬器未開機，點擊開機即可

調試項目（熱加載）

方便修改代碼時，一旦保存便可實時看到修改效果

打包安裝項目

在終端輸入命令

注意路徑是項目路徑下，若不是，則通過 cd 命令切換

flutter run

此時會打包 Build 一個apk，安裝到模擬器中，即便關閉vscode，依然能在模擬器中像使用其他安裝在模擬器里的APP一樣自由使用。（不具備熱加載的效果）

項目目錄

• android文件夾：存放Flutter與Android原生交互的代碼，該文件夾下的文件和單獨創建的Android項目基本一樣。
• ios文件夾：對于標準的iOS項目，存放Flutter與iOS原生交互的代碼。
• lib文件夾：Flutter的核心目錄，存放的是使用Dart語言編寫的代碼。不管是Android平臺，還是iOS平臺，安裝、配置開發環境后，都可以在對應的設備或模擬器上面運行這里的Dart代碼，而整個應用的入口是lib文件夾下的main.dart文件。也可以在這個lib文件夾下面創建不同的文件夾，里面存放了不同的文件來管理日益壯大的應用。
• test文件夾：存放Flutter的測試代碼。

• pubspec.yaml文件是項目的配置文件，可以在該文件中聲明項目中使用到的依賴庫、環境版本以及資源文件等。

以下是對默認應用–計數器 代碼的解析，了解即可，看不懂沒關系，后續學習慢慢就理解了。

lib\main.dart

// 導入 material UI 庫
import 'package:flutter/material.dart';

// 項目啟動函數—— main 函數
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // 重寫StatelessWidget的build()方法，返回一個組件對象
  @override
  Widget build(BuildContext context) {
    /*
    * MaterialApp表明應用采用Material Design風格，
    * 可以在theme屬性下配置應用中與主題相關的屬性，如顏色、按鈕風格
    * */
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  // 構造函數，用于接受調用者的參數
  MyHomePage({Key key, this.title}) : super(key: key);

  // 聲明了一個字符串類型的final變量，并在構造函數中初始化
  final String title;

  /*
  * 所有繼承自StatefulWidget的組件都要重寫createState() 方法，
  * 用于指定該頁面的狀態是由誰來控制的。
  * 在Dart中，以下劃線開頭的變量和方法的默認訪問權限就是私有的，
  * 類似于Java中用private關鍵字修飾的變量和方法,只能在類的內部訪問
  */
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/*
* State是一個狀態對象，<> 里面表示該狀態是與誰綁定的。
* 在修改狀態時，在該類中進行編寫
*/
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // 實現計數值加1的函數
  void _incrementCounter() {
    // setState方法用于更新屬性
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    /* 
    * Scaffold是一個Material Design風格的組件，
    * 它繼承自StatefulWidget，包含appBar、body、drawer等屬性
    * */
    return Scaffold(
      /* 頂部導航欄 */
      appBar: AppBar(
        /*
        * 這里的Widget其實就是MyHomePage，
        * 它在這里調用了上面傳遞過來的title變量
        */
        title: Text(widget.title),
      ),
     // Scaffold中的主體布局
      body: Center(
        /*
        * 在Center組件中有一個child屬性，用來定義它的子組件Column，
        * Column表示以行的形式顯示其子組件
        */
        child: Column(
          /*
          * mainAxisAlignment用來控制子組件的對齊方式，
          * 也可以把值設置為start、end等
          */
          mainAxisAlignment: MainAxisAlignment.center,
           /* 
           * Column組件的children屬性用于指定它的子組件，
           * 它接受一個數組，可以向該屬性傳遞多個組件
           */
          children: <Widget>[
            // Text組件，用于顯示文本
            Text(
              'You have pushed the button this many times:',
            ),
            // Text組件，使用style屬性來設置它的樣式
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      /*
      * FloatingActionButton也是Material Design風格的組件，
      * 可以在onPressed屬性中定義其單擊事件
      */
      floatingActionButton: FloatingActionButton(
        // 通過單擊觸發_incrementCounter函數
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        // 指定child的子組件為一個“+”號圖標
        child: Icon(Icons.add),
      ),
    );
  }
}