开启Flutter之旅--创建第一个Flutter APP

前言

在本篇文章中，我们使用Android Studio创建一个简单的demo，来揭开Flutter的神秘面纱。（PS：基于studio3.2版本开发的）

创建Flutter项目

在Android Studio中，选择“start a new Flutter project”或者选择File > New Flutter Project，会出现下图的面板，

屏幕快照 2019-05-22 下午7.06.31.png

选择Flutter Application，然后 Next ，出现下图的面板，

屏幕快照 2019-05-22 下午7.09.30.png

这里填写应用的信息。
-Project name：工程的名字。这里我们就填写first_flutter_app，需要注意的是Project name必须符合 Dart 包名命名规则（小写+下划线，可以有数字）。
-Flutter SDK path：Flutter sdk 的路径。
-Project location：工程的路径。
-Description：工程的描述。

填完之后，点击 Next，会出现下图的面板，

屏幕快照 2019-05-22 下午7.18.33.png

这里是设置我们项目的包名，下面有两个选项：

• Include Kotlin support for Android code（使用Kotlin开发）
• Include Swift support for iOS code（使用Swift开发）

如果使用 Kotlin 开发 Andorid 或者用 Swift 开发 iOS 的话就选上，如果不选 Android 默认使用 Java 开发，iOS 默认使用 Objective-C 开发。

然后点击 Finish，我们的项目就创建完成了。

运行Flutter APP

点击下图中的按钮运行APP，

屏幕快照 2019-05-22 下午7.28.43.png

运行效果

ps：第一次运行时间可能会有点久。

Android 模拟器：

Screenshot_1558530168.png

iOS 模拟器：

屏幕快照 2019-05-22 下午8.58.15.png

Flutter 代码的目录结构

在创建完Flutter APP之后，我们要看一下它的目录结构。

屏幕快照 2019-05-23 下午4.47.48.png

• Android 目录
  这个目录下是一个完整的 Android APP 工程的代码。可以理解为Flutter在Android上的壳子，这个目录里的代码都会被打包进 Flutter 的Android 安装包里。
• ios 目录
  这个目录下是一个完整的 iOS APP 工程的代码。可以理解成 Flutter 在 iOS 上的壳子，这个目录里的代码都会被打包进 Flutter 的 iOS 安装包中。
• lib 目录
  这里是 Flutter 的代码，使用 Dart 语言编写。main.dart 是 Flutter 的入口文件。
• test 目录
  这里是 Flutter 的测试代码，使用 Dart 语言编写。
• pubspec.yaml 文件
  这个是 Flutter 的配置文件，声明了 Flutter APP 的名称、版本、作者等的元数据文件，还有声明的依赖库，和指定的本地资源（图片、字体、音频、视频等）。
  注意：pubspec.yaml 是 Flutter 的配置，是 Flutter 里的重要部分。

然后我们再看一下，从哪里开始编写代码。打开 main.dart :

屏幕快照 2019-05-23 下午5.03.25.png

这里的 main() 函数就是 Flutter 的入口函数。
在 main() 函数里要运行 runApp() 函数，runApp() 函数的参数类型是Widget 类型。使用的方法如下：

void main() => runApp(MyApp());

这个使用方法是固定的。后面文章我们再接着在 main.dart 文件中编写代码。

总结

到此，我们就可以创建一个 Flutter APP 并在 Android 和 iOS 设备上运行了。