前言

轉(zhuǎn)載:范特西_jay 原文鏈接

Flutter開發(fā)工具很多，有很多支持Flutter開發(fā)的IDE鸦列。比如Android Studio腕巡、Visual Studio Code、InteIIiJ
IDEA、Atom锁蠕、Komodo等拦英。這里將使用Visual Studio Code作為主要開發(fā)工具，因?yàn)閂isual Studio Code占用內(nèi)存和CPU比較低院峡，非常的流暢兴使，體驗(yàn)也比較的好。模擬器的話照激，這里推薦使用Android官方的模擬器发魄，也就是Android Studio SDK里帶的模擬器。不過(guò)俩垃，這里的模擬器我們使用單獨(dú)啟動(dòng)的励幼，無(wú)需從Android Studio啟動(dòng)，當(dāng)然也可以用真機(jī)運(yùn)行調(diào)試口柳。接下來(lái)赏淌，我們就開始Flutter開發(fā)環(huán)境的搭建吧。注意：本文是在Windows環(huán)境下安裝的開發(fā)環(huán)境啄清。本文將主要介紹：

• Flutter下載與環(huán)境變量配置
• Visual Studio Code插件安裝與新建Flutter項(xiàng)目
• 模擬器的安裝
• 運(yùn)行Flutter項(xiàng)目到模擬器和真機(jī)
• Flutter常用命令

開發(fā)環(huán)境的搭建

1. 下載Flutter SDK

Flutter SDK由兩部分構(gòu)成六水，一個(gè)是Dart SDK，另一個(gè)就是Flutter SDK辣卒，因?yàn)镕lutter是基于Dart的掷贾。可以通過(guò)兩種方式下載：一種是Git下載荣茫；另一種是直接下載SDK壓縮包即可想帅。

Git方式我們可以通過(guò)拉取官方Github上的flutter分支來(lái)下載。分支分類如下圖：

作為一個(gè)ios開發(fā)者啡莉，遇到問(wèn)題的時(shí)候港准，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要,對(duì)自身有極大幫助旨剥，眾人拾柴火焰高 這是一個(gè)我的iOS交流群：711315161，進(jìn)群密碼iOS 分享BAT,阿里面試題浅缸、面試經(jīng)驗(yàn)轨帜，討論技術(shù)， 大家一起交流學(xué)習(xí)成長(zhǎng)衩椒！希望幫助開發(fā)者少走彎路蚌父。

Flutter分支

可以看到主要有dev、beta和stable三個(gè)官方分支使毛萌，這里正式開發(fā)的話可以下載stable穩(wěn)定版本苟弛。用Git命令進(jìn)行下載stable分支：

git clone -b stable https://github.com/flutter/flutter.git

另一種是直接官網(wǎng)下載SDK壓縮包，官方下載地址為：

https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

2. 配置環(huán)境變量

下載完SDK后我們可以把它解壓放到指定文件夾里阁将，接下來(lái)就是配置SDK環(huán)境變量量膏秫，這樣我們就可以在需要的目錄執(zhí)行相關(guān)命令了。如果在官網(wǎng)更新下載SDK慢的話做盅，可以設(shè)置國(guó)內(nèi)的鏡像代理地址荔睹，這樣下載會(huì)快一些⊙陨撸可以將如下的國(guó)內(nèi)下載鏡像地址加入到環(huán)境變量中：

變量名：PUB_HOSTED_URL，變量值：https://pub.flutter-io.cn
變量名：FLUTTER_STORAGE_BASE_URL宵距，變量值：https://storage.flutter-io.cn

Flutter SDK環(huán)境變量腊尚，講flutter的bin目錄加入環(huán)境變量即可：

[你的Flutter文件夾路徑]\flutter\bin

這樣我們的Flutter SDK的環(huán)境變量就配置完畢了。接下來(lái)在命令提示符窗口中輸入命令：

flutter doctor

它可以幫助我們檢查Flutter環(huán)境變量是否設(shè)置成功满哪，Android SDK是否下載以及配置好環(huán)境變量等等婿斥。如果有相關(guān)的錯(cuò)誤提示，根據(jù)提示進(jìn)行修復(fù)和安裝哨鸭、設(shè)置即可民宿。每次運(yùn)行這個(gè)命令，都會(huì)幫你檢查是否缺失了必要的依賴像鸡。通過(guò)運(yùn)行flutter doctor命令來(lái)驗(yàn)證你是否已經(jīng)正確地設(shè)置了活鹰，并且可以自動(dòng)更新和下載相關(guān)的依賴。如果全部配置正確的話只估，會(huì)出現(xiàn)如下類似的檢測(cè)信息：

Flutter配置檢查

主要檢測(cè)信息為：Flutter志群、Android toolchain、Connected device蛔钙。

3．安裝Visual Studio Code所需插件

在Visual Studio Code的Extensions里搜索安裝Dart和Flutter擴(kuò)展插件：

Flutter插件安裝

安裝完成插件后锌云，重啟Visual Studio Code編輯器即可。

4．創(chuàng)建Flutter項(xiàng)目

接下來(lái)進(jìn)行Flutter項(xiàng)目的新建吁脱，我們可以通過(guò)命令面板或者快捷鍵Ctrl+Shif+P打開命令面板桑涎，找到Flutter：New Project：

Flutter新建項(xiàng)目

點(diǎn)擊New Project彬向，接下來(lái)進(jìn)入項(xiàng)目名稱輸入：

輸入Flutter項(xiàng)目名稱

回車，然后選擇好項(xiàng)目的存儲(chǔ)位置即可攻冷，這樣就完成了Flutter項(xiàng)目的新建娃胆。
整個(gè)的創(chuàng)建流程日志如下：

[undefined] flutter create .
Waiting for another flutter command to release the startup lock...
Creating project ....
  .gitignore (created)
  .idea\libraries\Dart_SDK.xml (created)
  .idea\libraries\Flutter_for_Android.xml (created)
  .idea\libraries\KotlinJavaRuntime.xml (created)
  .idea\modules.xml (created)
  .idea\runConfigurations\main_dart.xml (created)
  .idea\workspace.xml (created)
  .metadata (created)
  android\app\build.gradle (created)
  android\app\src\main\java\com\example\fluttersamples\MainActivity.java (created)
  android\build.gradle (created)
  android\flutter_samples_android.iml (created)
  android\app\src\main\AndroidManifest.xml (created)
  android\app\src\main\res\drawable\launch_background.xml (created)
  android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  android\app\src\main\res\values\styles.xml (created)
  android\gradle\wrapper\gradle-wrapper.properties (created)
  android\gradle.properties (created)
  android\settings.gradle (created)
  ios\Runner\AppDelegate.h (created)
  ios\Runner\AppDelegate.m (created)
  ios\Runner\main.m (created)
  ios\Runner.xcodeproj\project.pbxproj (created)
  ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  ios\Flutter\AppFrameworkInfo.plist (created)
  ios\Flutter\Debug.xcconfig (created)
  ios\Flutter\Release.xcconfig (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  ios\Runner\Base.lproj\Main.storyboard (created)
  ios\Runner\Info.plist (created)
  ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  lib\main.dart (created)
  flutter_samples.iml (created)
  pubspec.yaml (created)
  README.md (created)
  test\widget_test.dart (created)
Running "flutter packages get" in flutter_samples...            11.8s
Wrote 64 files.

All done!
[√] Flutter is fully installed. (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.590], locale zh-CN)
[√] Android toolchain - develop for Android devices is fully installed. (Android SDK 28.0.3)
[√] Android Studio is fully installed. (version 3.3)
[√] IntelliJ IDEA Community Edition is fully installed. (version 2018.3)
[!] Connected device is not available.

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.

exit code 0

Flutter項(xiàng)目結(jié)構(gòu)如下：

Flutter項(xiàng)目結(jié)構(gòu)

其中，Android相關(guān)的修改和配置在android目錄下讲衫，結(jié)構(gòu)和Android應(yīng)用項(xiàng)目結(jié)構(gòu)一樣缕棵；IOS相關(guān)修改和配置在ios目錄下，結(jié)構(gòu)和IOS應(yīng)用項(xiàng)目結(jié)構(gòu)一樣涉兽。最重要的flutter代碼文件是在lib目錄下招驴，類文件以.dart結(jié)尾，語(yǔ)法結(jié)構(gòu)為Dart語(yǔ)法結(jié)構(gòu)枷畏。大致如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

模擬器的安裝與調(diào)試

項(xiàng)目新建完畢了别厘，接下來(lái)就是編譯運(yùn)行Flutter項(xiàng)目到真機(jī)或者模擬器了。先說(shuō)模擬器拥诡，模擬器在我們下載的Android SDK的目錄里触趴，可以通過(guò)兩種方法創(chuàng)建模擬器，推薦在Android Studio里新建一個(gè)模擬器渴肉，點(diǎn)擊進(jìn)入AVD Manager冗懦，如果沒有模擬器的話，就創(chuàng)建一個(gè)即可仇祭，可以選擇最新的SDK：

AVD Manager模擬器列表

創(chuàng)建完畢后披蕉，我們就可以在電腦的模擬器目錄看到我們創(chuàng)建的模擬器里：

已創(chuàng)建的模擬器列表

對(duì)應(yīng)的模擬器AVD Manager相關(guān)也在Android SDK目錄下：

SDK里的模擬器所在目錄

接下來(lái)我們就可以關(guān)閉相關(guān)窗口了，建立一個(gè)bat文件乌奇，寫入啟動(dòng)模擬器的命令没讲，這樣每次啟動(dòng)模擬器直接運(yùn)行這個(gè)bat文件即可：

D:\Sdk\emulator\emulator.exe -avd Pixel_XL_API_28

模擬器所在的SDK目錄根據(jù)你的實(shí)際情況位置修改即可。

快速運(yùn)行模擬器的命令文件

接下來(lái)礁苗，雙擊這個(gè)bat文件運(yùn)行模擬器：

啟動(dòng)模擬器

接著在項(xiàng)目所在目錄運(yùn)行flutter run命令即可編譯運(yùn)行flutter項(xiàng)目到模擬器上：

啟動(dòng)模擬器日志

運(yùn)行效果如下圖：

Flutter Demo模擬器運(yùn)行效果

運(yùn)行成功后爬凑，后續(xù)運(yùn)行調(diào)試只要不退出應(yīng)用界面，就可以進(jìn)行熱重載试伙，輸入r進(jìn)行熱重載當(dāng)前頁(yè)面嘁信，輸入R進(jìn)行整個(gè)應(yīng)用的熱重啟，輸入h彈出幫助信息疏叨，輸入d解除關(guān)聯(lián)吱抚，輸入q退出應(yīng)用調(diào)試。如果遇到有多個(gè)模擬器或者模擬器和真機(jī)同時(shí)存在的話考廉，可以通過(guò)-d參數(shù)加設(shè)備ID指定要運(yùn)行的設(shè)備秘豹，例如：

flutter run -d emulator-5556

可以通過(guò)flutter devices或adb devices命令查看目前已連接的設(shè)備信息。
還有一種命令方式創(chuàng)建模擬器昌粤，輸入如下命令可以查看當(dāng)前可用的模擬器：

flutter emulator

輸入以下命令可以創(chuàng)建指定名稱的模擬器既绕，默認(rèn)創(chuàng)建的模擬器Android版本號(hào)為已安裝的最新的SDK版本號(hào)：

flutter emulators --create --name xyz

運(yùn)行以下命令可以啟動(dòng)模擬器：

flutter emulators --launch <emulator id>

替換為你的模擬器ID名稱即可啄刹。
真機(jī)設(shè)備運(yùn)行調(diào)試和模擬器的過(guò)程基本一樣，手機(jī)和電腦通過(guò)USB連接凄贩，手機(jī)開啟開發(fā)人員選項(xiàng)和USB調(diào)試誓军，最后運(yùn)行flutter run命令即可。
其他常用的命令如下：

flutter build apk;           //打包Android應(yīng)用
flutter build apk –release;
flutter install;              //安裝應(yīng)用
flutter build ios;            //打包IOS應(yīng)用
flutter build ios –release;
flutter clean;               //清理重新編譯項(xiàng)目
flutter upgrade;            //升級(jí)Flutter SDK和依賴包
flutter channel;            //查看Flutter官方分支列表和當(dāng)前項(xiàng)目使用的Flutter分支
flutter channel <分支名>;   //切換分支

好了疲扎，F(xiàn)lutter開發(fā)環(huán)境搭建和調(diào)試就為大家講解到這里了昵时。