Flutter 是什么
Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面...
balabalabala 的这些介绍网上一搜一大堆,这次的分享主要是在 Udemy 上购买了 Max 老师关于 Flutter 《
Learn Flutter & Dart to Build iOS & Android Apps》的课程,然后一边学习一边归纳总结自己的理解。
Flutter 前期准备
- 安装
Flutter SDK
- 安装
Android Studio
(只要利用 AVD 虚拟机来虚拟运行我们 Flutter 应用) - IDE 我跟 Max 一样选用
VS Code
更多的安装使用介绍,可参考官方安装步骤
第一个 Flutter 应用
对,你没猜错,还是用 Hello world 来写第一个 Flutter 应用
当前期准备就绪,就可以用 Flutter 创建我们的项目,如 flutter create 项目名
,注意项目名不能加连字符如 hello-world
,注意需要小写
From the Pubspec format description:
DO uselowercase_with_underscores
for package names.
Package names should be all lowercase, with underscores to separate words,
just_like_this
. Use only basic Latin letters and Arabic digits: [a-z0-9_].
Also, make sure the name is a valid Dart identifier -- that it doesn't start
with digits and isn't a reserved word.
flutter create hello_world
'或'
flutter create helloworld
目录结构
项目创建后,简单介绍几个重要的目录与文件
-
android 与 ios 目录
:分别持有各自平台的原生代码,是编译时所需内容,只有细微调整不同平台代码的时候才需要访问修改 -
build 目录
:编译完成后的内容 -
lib 目录
:里面放着程序源码-
main.dart 文件
:入口文件
-
-
test 目录
:自动化测试 -
pubspec.yaml 文件
:整个项目的配置与依赖信息
入口文件与入口函数
-
Flutter 的入口文件:位于
/lib/main.dart
,并文件名不能修改(此处我们将创建项目后原 main.dart 文件内容清空,从无到有写一次) -
Flutter 的入口函数:
main
,不带返回值,也写作void main
- 先加入
void main
,此处可使用dart /lib/main.dart
来运行并查看控制态输出(我没有单独安装 dart,所以就没有单独运行)
'main.dart'
void main() {
print('app running....'); // 控制台输出
}
提高 Flutter 的开发体验
VS Code 上的必备扩展:Flutter
,安装后在 dart 文件下会有自动格式化,语法提示等强大的功能。
运行程序
-
打开 Android Studio 并开启
AVD Manager
选其中一个虚拟器
命令行方式运行(推荐使用,因有热加载等更多功能):运行入口文件
/lib/main.dart
的入口函数main
开始运行
flutter run
-
IDE 方式运行:VS Code 上使用 Debug 工具 -> 运行并
选择 Flutter & Dart
(若当前焦点在 dart 文件里,则自动跳过选择步骤并自动启动)
运行完毕后,终端上出现I/flutter ( xxxx): app running....
而我们的 Flutter 应用需要将内容挂载到设备上,目前没这个步骤,因此虚拟器上只出现白屏
到这里我们已经成功运行 Flutter 应用了,只是目前还没将界面挂载到设备上,下节课会一起学习将界面(组件树)挂载到设备上。