[你的Flutter文件夹路径]flutterbin
这样我们的Flutter SDK的环境变量就配置完毕了。接下来在命令提示符窗口中输入命令：
flutter doctor
它可以帮助我们检查Flutter环境变量是否设置成功，Android SDK是否下载以及配置好环境变量等等。如果有相关的错误提示，根据提示进行修复和安装、设置即可。每次运行这个命令，都会帮你检查是否缺失了必要的依赖。通过运行flutter doctor命令来验证你是否已经正确地设置了，并且可以自动更新和下载相关的依赖。如果全部配置正确的话，会出现如下类似的检测信息：
主要检测信息为：Flutter、Android toolchain、Connected device。
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享
安装Visual Studio Code所需插件
在Visual Studio Code的Extensions里搜索安装Dart和Flutter扩展插件：
安装完成插件后，重启Visual Studio Code编辑器即可。
接下来进行Flutter项目的新建，我们可以通过命令面板或者快捷键Ctrl+Shif+P打开命令面板，找到Flutter：New Project：
点击New Project，接下来进入项目名称输入：
回车，然后选择好项目的存储位置即可，这样就完成了Flutter项目的新建。
整个的创建流程日志如下：
[undefined] flutter create .
Waiting for another flutter command to release the startup lock…
Creating project …
.gitignore (created)
.idealibrariesDart_SDK.xml (created)
.idealibrariesFlutter_for_Android.xml (created)
.idealibrariesKotlinJavaRuntime.xml (created)
.ideamodules.xml (created)
.idearunConfigurationsmain_dart.xml (created)
.ideaworkspace.xml (created)
.metadata (created)
androidappbuild.gradle (created)
androidappsrcmainjavacomexamplefluttersamplesMainActivity.java (created)
androidbuild.gradle (created)
androidflutter_samples_android.iml (created)
androidappsrcmainAndroidManifest.xml (created)
androidappsrcmainresdrawablelaunch_background.xml (created)
androidappsrcmainresmipmap-hdpiic_launcher.png (created)
androidappsrcmainresmipmap-mdpiic_launcher.png (created)
androidappsrcmainresmipmap-xhdpiic_launcher.png (created)
androidappsrcmainresmipmap-xxhdpiic_launcher.png (created)
androidappsrcmainresmipmap-xxxhdpiic_launcher.png (created)
androidappsrcmainresvaluesstyles.xml (created)
androidgradlewrappergradle-wrapper.properties (created)
androidgradle.properties (created)
androidsettings.gradle (created)
iosRunnerAppDelegate.h (created)
iosRunnerAppDelegate.m (created)
iosRunnermain.m (created)
iosRunner.xcodeprojproject.pbxproj (created)
iosRunner.xcodeprojxcshareddataxcschemesRunner.xcscheme (created)
iosFlutterAppframeworkInfo.plist (created)
iosFlutterDebug.xcconfig (created)
iosFlutterRelease.xcconfig (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetContents.json (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-1024x1024@1x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-20x20@1x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-20x20@2x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-20x20@3x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-29x29@1x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-29x29@2x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-29x29@3x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-40x40@1x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-40x40@2x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-40x40@3x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-60x60@2x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-60x60@3x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-76x76@1x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-76x76@2x.png (created)
iosRunnerAssets.xcassetsAppIcon.appiconsetIcon-App-83.5x83.5@2x.png (created)
iosRunnerAssets.xcassetsLaunchImage.imagesetContents.json (created)
iosRunnerAssets.xcassetsLaunchImage.imagesetLaunchImage.png (created)
iosRunnerAssets.xcassetsLaunchImage.imagesetLaunchImage@2x.png (created)
iosRunnerAssets.xcassetsLaunchImage.imagesetLaunchImage@3x.png (created)
iosRunnerAssets.xcassetsLaunchImage.imagesetREADME.md (created)
iosRunnerbase.lprojLaunchScreen.storyboard (created)
iosRunnerbase.lprojMain.storyboard (created)
iosRunnerInfo.plist (created)
iosRunner.xcodeprojproject.xcworkspacecontents.xcworkspacedata (created)
iosRunner.xcworkspacecontents.xcworkspacedata (created)
libmain.dart (created)
flutter_samples.iml (created)
pubspec.yaml (created)
README.md (created)
testwidget_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 .libmain.dart.
exit code 0
Flutter项目结构如下：
其中，Android相关的修改和配置在android目录下，结构和Android应用项目结构一样；IOS相关修改和配置在ios目录下，结构和IOS应用项目结构一样。最重要的flutter代码文件是在lib目录下，类文件以.dart结尾，语法结构为Dart语法结构。大致如下：
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.
);
}
}
项目新建完毕了，接下来就是编译运行Flutter项目到真机或者模拟器了。先说模拟器，模拟器在我们下载的Android SDK的目录里，可以通过两种方法创建模拟器，推荐在Android Studio里新建一个模拟器，点击进入AVD Manager，如果没有模拟器的话，就创建一个即可，可以选择最新的SDK：
创建完毕后，我们就可以在电脑的模拟器目录看到我们创建的模拟器里：
对应的模拟器AVD Manager相关也在Android SDK目录下：
以通过两种方法创建模拟器，推荐在Android Studio里新建一个模拟器，点击进入AVD Manager，如果没有模拟器的话，就创建一个即可，可以选择最新的SDK：
[外链图片转存中…(img-sV8WWiGP-1637664989704)]
创建完毕后，我们就可以在电脑的模拟器目录看到我们创建的模拟器里：
[外链图片转存中…(img-3OBObO9I-1637664989704)]
对应的模拟器AVD Manager相关也在Android SDK目录下：
