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

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

flutter doctor

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

主要檢測信息為：Flutter、Android toolchain、Connected device。

3．安裝Visual Studio Code所需插件

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

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

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

接下來進行Flutter項目的新建，我們可以通過命令面板或者快捷鍵Ctrl+Shif+P打開命令面板，找到Flutter：New Project：

點擊New Project，接下來進入項目名稱輸入：

回車，然后選擇好項目的存儲位置即可，這樣就完成了Flutter項目的新建。
整個的創(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項目結(jié)構(gòu)如下：

其中，Android相關(guān)的修改和配置在android目錄下，結(jié)構(gòu)和Android應(yīng)用項目結(jié)構(gòu)一樣；IOS相關(guān)修改和配置在ios目錄下，結(jié)構(gòu)和IOS應(yīng)用項目結(jié)構(gòu)一樣。最重要的flutter代碼文件是在lib目錄下，類文件以.dart結(jié)尾，語法結(jié)構(gòu)為Dart語法結(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 {
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: [
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)試

項目新建完畢了，接下來就是編譯運行Flutter項目到真機或者模擬器了。先說模擬器，模擬器在我們下載的Android SDK的目錄里，可以通過兩種方法創(chuàng)建模擬器，推薦在Android Studio里新建一個模擬器，點擊進入AVD Manager，如果沒有模擬器的話，就創(chuàng)建一個即可，可以選擇最新的SDK：

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

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

接下來我們就可以關(guān)閉相關(guān)窗口了，建立一個bat文件，寫入啟動模擬器的命令，這樣每次啟動模擬器直接運行這個bat文件即可：

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

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

接下來，雙擊這個bat文件運行模擬器：
![](https://upload-images.jianshu.io/upload?
_images/19956127-63169e40c2ac8d0e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
接著在項目所在目錄運行flutter run命令即可編譯運行flutter項目到模擬器上：

運行效果如下圖：

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

flutter run -d emulator-5556

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

最后

小編這些年深知大多數(shù)初中級Android工程師，想要提升自己，往往是自己摸索成長，自己不成體系的自學(xué)效果低效漫長且無助。

因此我收集整理了一份《2024年Android移動開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友。

一個人可以走的很快，但一群人才能走的更遠！不論你是正從事IT行業(yè)的老鳥或是對IT行業(yè)感興趣的新人

都歡迎加入我們的的圈子（技術(shù)交流、學(xué)習(xí)資源、職場吐槽、大廠內(nèi)推、面試輔導(dǎo)），讓我們一起學(xué)習(xí)成長！

資料?專欄獲取
己，往往是自己摸索成長，自己不成體系的自學(xué)效果低效漫長且無助**。

因此我收集整理了一份《2024年Android移動開發(fā)全套學(xué)習(xí)資料》，初衷也很簡單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友。

[外鏈圖片轉(zhuǎn)存中…(img-1lEfuGdr-1719089137890)]一個人可以走的很快，但一群人才能走的更遠！不論你是正從事IT行業(yè)的老鳥或是對IT行業(yè)感興趣的新人

都歡迎加入我們的的圈子（技術(shù)交流、學(xué)習(xí)資源、職場吐槽、大廠內(nèi)推、面試輔導(dǎo)），讓我們一起學(xué)習(xí)成長！

資料?專欄獲取