在开始之前你需要有
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
,选择第二项
第一个为新建一个
Flutter
应用程序,后面三个为Flutter
插件,Flutter
包,Flutter
组件,这几个本文不作详细说明,以后再写文展开说。注意:Flutter SDK
选项切勿修改,除非有多个版本SDK
flutter
工程项目目录说明
-
adnroid
-- 安卓工程项目目录 -
.iml
-- 当前项目目录的一些配置信息文件 -
ios
-- 苹果工程项目目录 -
lib
--dart
代码文件目录 -
pubspec.lock
-- 依赖库&插件的配置文件的记录文件 -
pubspec.yaml
-- 依赖库&插件的配置文件 -
test
-- 单元测试目录
项目运行效果
这是一个记录点击按钮次数的功能,按下右下角的按钮,中间的数字随之增加,如果你是
android studio
运行的,可以找到界面重载按钮,或者是终端运行的,可以按下 R
,来体验flutter
的hot reload
热重载功能