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

frc b4ccd67d37d5c34ff30587b92ce13b1b - 【学习 Flutter】第一个 Flutter App
VS Code Flutter 扩展

运行程序

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

    frc e42e9cea82efd3d5b2cb2f899c623d25 - 【学习 Flutter】第一个 Flutter App
    AVD Manager
  • 命令行方式运行(推荐使用,因有热加载等更多功能):运行入口文件 /lib/main.dart 的入口函数 main 开始运行

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

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

frc df681bea860dc44dfc0745d9ec06534b - 【学习 Flutter】第一个 Flutter App
未挂载 白屏

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

【学习 Flutter】第一个 Flutter App