創(chuàng)建項目

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

運行項目

啟動模擬器

點擊右下角的 No Device

選擇搭建開發(fā)環(huán)境時，已創(chuàng)建好的模擬器


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

調(diào)試項目（熱加載）

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

打包安裝項目

在終端輸入命令

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

flutter run

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

項目目錄

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

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

以下是對默認(rèn)應(yīng)用–計數(shù)器 代碼的解析，了解即可，看不懂沒關(guān)系，后續(xù)學(xué)習(xí)慢慢就理解了。

lib\main.dart

// 導(dǎo)入 material UI 庫
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

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

class MyHomePage extends StatefulWidget {
  // 構(gòu)造函數(shù)，用于接受調(diào)用者的參數(shù)
  MyHomePage({Key key, this.title}) : super(key: key);

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

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

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

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

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