Flutter--开发体验初探

在开始之前你需要有flutter的环境，可以参考我另一篇Flutter--macOS安装与配置进行初探的准备工作。

新建项目注意以下两点

• 项目的路径不能包含中文，否则运行会出错。
• 项目名称不能出现大写，为了可读性一般以_区分。

1、 终端体验

进入到你想新建项目的目录，例如桌面，通过flutter create命令创建

$ cd Dektop
~/Desktop $ flutter create demo_flutter
Creating project demo_flutter...
  demo_flutter/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
......
All done!
......
In order to run your application, type:

  $ cd demo_flutter
  $ flutter run

Your application code is in demo_flutter/lib/main.dart.

demo_flutter运行

$ cd demo_flutter
 ~/Desktop/demo_flutter $ flutter run
$ flutter run
No supported devices connected.

这是因为当前没有可运行的设备，可通过手机连接电脑(苹果手机需要配置账号或证书),也可手动去Android studio或者xcode中打开模拟器，也可通过终端打开模拟器(请看Flutter--macOS安装与配置中关于Device部分)

如果只有一个设备,flutter run会直接运行到当前设备中

 ~/Desktop/demo_flutter $ flutter run
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
......

如果有多个设备需要通过可选参数选择一个-d <deviceId>(deviceId 为 第一个 •后面的名字)或者全部-d all设备运行

$ flutter run
More than one device connected; please specify a device with the '-d <deviceId>'
flag, or use '-d all' to act on all devices.

Android SDK built for x86 64 • emulator-5554                        •
android-x64 • Android 10 (API 29) (emulator)
iPhone 11                    • EFED2808-8BD3-4E4F-99B5-D91F68A3ECE8 • ios
• com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator)
//例
$ flutter run emulator-5554 
Using hardware rendering with device Android SDK built for x86 64. If you get
graphics artifacts, consider enabling software rendering with

项目打开效果在本文最后

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".

运行后终端输出中的这句话是说flutter在 debug模式下很特别的地方，也就是hot reload(热重载)，就是就是可以在项目运行情况下按下r键生效代码并重新渲染当前页面，按下R建可以完成全部在运行的情况下生效代码修改和完成重新渲染到入口，类似于重启

2、Android Studio体验

打开Android Studio，选择第二项

new Flutter.png

new flutter2.png

注意:Flutter SDK选项切勿修改,除非有多个版本SDK

new flutter3.png

new flutter4.png

new flutter5.png

flutter工程项目目录说明

• adnroid -- 安卓工程项目目录
• .iml -- 当前项目目录的一些配置信息文件
• ios -- 苹果工程项目目录
• lib -- dart代码文件目录
• pubspec.lock -- 依赖库&插件的配置文件的记录文件
• pubspec.yaml -- 依赖库&插件的配置文件
• test -- 单元测试目录

项目运行效果

run app.png