【学习 Flutter】第一个 Flutter App

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 use lowercase_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 文件下会有自动格式化，语法提示等强大的功能。

VS Code Flutter 扩展

运行程序

• 打开 Android Studio 并开启 AVD Manager 选其中一个虚拟器
  

  AVD Manager

• 命令行方式运行(推荐使用，因有热加载等更多功能)：运行入口文件 /lib/main.dart 的入口函数 main 开始运行

flutter run

• IDE 方式运行：VS Code 上使用 Debug 工具 -> 运行并选择 Flutter & Dart(若当前焦点在 dart 文件里，则自动跳过选择步骤并自动启动)
  运行完毕后，终端上出现 I/flutter ( xxxx): app running....

而我们的 Flutter 应用需要将内容挂载到设备上，目前没这个步骤，因此虚拟器上只出现白屏

未挂载 白屏

到这里我们已经成功运行 Flutter 应用了，只是目前还没将界面挂载到设备上，下节课会一起学习将界面（组件树）挂载到设备上。