Flutter初窥 - 环境搭建

前言

Flutter 1.5版本正式发布，Web App开始支持，先来体验下用Flutter构建Native App， 第一次写Markdown式文章~勿喷

环境

Windows 10

官网

https://flutter.dev/

下载

https://flutter.dev/docs/get-started/install/windows

解压后配置环境变量

1. 国内Dart包镜像

   PUB_HOSTED_URL = https://pub.flutter-io.cn

2. 淘宝Flutter资源存储服务器

   FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn

3. Flutter目录

   FLUTTER = X:\your\flutter\directory

4. Path追加

   %FLUTTER%\bin

Android SDK环境设置

1. 安装Android Studio
   过程不作叙述，附上下载地址页面（本文使用的是3.2.0版本的手动更新版，菜单栏events提示升级信息）

   http://www.android-studio.org/

2. 环境变量

   
   ANDROID_HOME = X:\your\android\sdk\directory
   

3. Path追加

   
   %ANDROID_HOME%\tools
   %ANDROID_HOME%\platform-tools
   

执行环境检测

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
	[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version
    10.0.17763.437], locale zh-CN)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Android Studio (version 3.4)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Android工具链的使用执照

执行

> flutter doctor --android-licenses
全部 y 通过即可

Android Studio插件安装

1. 启动Android Studio > Configuration > Plugins > Marketplace
2. 搜索Flutter安装并重启（Dart会提示自动安装，accept即可）

启动模拟器

1. 启动Android Studio > Configuration > AVD
2. 运行模拟器

命令行再次确认所有环境

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version
    10.0.17763.437], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.4)
[√] Connected device (1 available)

• No issues found!

至此所有环境准备完毕

hello world

1. 新建Flutter项目，命令行运行(直接用Android Studio的菜单新建项目会卡死，所以先用命令创建再导入项目了)

	> flutter create my_project

2. 检查连接设备并运行,或者导入项目到Android Studio,在菜单栏选择设备并运行

> flutter devices
1 connected device:

Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28)
(emulator)
> cd my_project
> flutter run

3. 修改main.dart, 添加Text控件，保存,IDE会自动刷新模拟器界面或者在命令行界面按r刷新

return Scaffold(
	...
	body: Center(
	...
	child: Column(
		...
		children: [
		// 追加的Text控件
		Text(
			'Hello World!'
		),
		...
		],
	),
	),
	...
)

4. 结束，这其实算是环境搭建了，下一章再深入解析界面代码结构