Flutter简介及环境搭建【1.2】

本章主要介绍Flutter项目的创建、目录结构以及 发布流程等，让我们对Flutter项目有一个整体、清晰 的认识。 通过本章，你将学习如下内容：

·创建Flutter项目

·项目目录说明

·App调试运行

·设置App名称及图标

·设置App启动页

·App构建发布

2.1 创建Flutter项目

我们使用Android Studio创建一个Flutter App。 打开Android Studio，点击File→New→New Flutter Project，如图2-1所示。 在出现的界面上选择Flutter Application，点击 “Next”按钮，如图2-2所示。 在New Flutter Application界面上填写Project name、Flutter SDK path（路径）、Project location的名称，然后，点击“Next”按钮，如图2-3 所示。 进入设置包名界面，如图2-4所示。

其中，各选项的含义如下。 ·Company domain：可以任意填写，当然，名称 最好有意义。 ·Package name：点击后面的“Edit ”按钮手动编 辑包名，这个名称就是我们的App包名。 下面是3个可选项，如果对Android或者iOS开发不 熟悉，建议不要勾选这3个选项。 ·AndroidX：androidx组件。 ·Include Kotlin support for Android code：Android 支持Kotlin。 ·Include Swift support for iOS code：iOS支持 Swift。 填写信息后点击“Finish”按钮，此时我们的第 一个Flutter App就已经创建好了。

2.2 项目目录说明

Flutter App的目录结构如图2-5所示。 

目录说明如下。

·android：Android原生代码目录。

·ios：iOS原生代码目录。

·lib：Flutter项目的核心目录，我们写的代码就放 在这个目录，我们可以在这个目录创建子目录。 ·test：测试代码目录。

·pubspec.yaml：Flutter项目依赖的配置文件，类 似于Android build.gradle文件，这里面包含了Flutter SDK版本、依赖等，后面我们将在学习过程中具体说 明。 这是最简单的App目录，实际项目会比这复杂，但 万变不离其宗。

2.3　App调试运行

下面讲解如何在Android手机和iOS手机上调试运行Flutter App。

2.3.1　Android手机调试运行

我们先在Android手机上运行，看看效果。在Android Studio顶部我们可以看到工具栏，如图2-6所 示。

在第一个选项框中出现<no device>表示电脑未连 接手机，则我们把Android手机和电脑通过USB线连接 在一起，如果还显示<no device>，则需要启用“开发 人员选项”和“USB调试”。 注意 默认情况下设备是不显示“开发人员选 项”的，需要通过“设置→关于手机” ，连续点击 “版本号”5次，然后会提示打开了“开发人员选 项” ，然后可以在设备中看到此选项，进入“开发人 员选项”打开USB调试即可。如果按照上面的方法还是 无法打开“开发人员选项” ，是由于不同手机厂商导 致操作方法略有不同，可根据自己手机型号自行百 度。 启用“开发人员选项”后，手机上会弹出“允许 USB调试吗？” ，点击确定。此时会出现手机型号的选项，选择相应的手机作为允许的设备，如图2-7所示。  

注意 手机系统需要Android 4.1(API Level 16)或更高的版本。此时点击绿色的三角按钮运行调试，如图2-8所示。

 一般情况下，我们都会遇到如下问题：

这个问题可能是由两个方面引起的：

1）依赖的插件无法下载，导致编译不过。解决办法如下：打开项目的android→build.gradle，将如下代码

google()

jcenter()

替换为

maven{ url 'https://maven.aliyun.com/repository/google'}

maven{ url 'https://maven.aliyun.com/repository/gradle

plugin'}

maven{ url 'https://maven.aliyun.com/repository/public'}

maven{ url 'https://maven.aliyun.com/repository/jcenter'}

最终效果如图2-9所示。

打开Flutter SDK中

packages→flutter_tools→gradle→flutter.gradle

，将如下代码：

maven{ url 'https://maven.aliyun.com/repository/google'}

maven{ url 'https://maven.aliyun.com/repository/gradle

plugin'}

maven{ url 'https://maven.aliyun.com/repository/public'}

maven{ url 'https://maven.aliyun.com/repository/jcenter'}

添加到google()的上面，最终效果如图2-10所示。

2）如果上面的方法还没有解决问题，找到问题中gradle的文件，比如我的路径是：/User/mengqingdong/.gradle/wrapper/dists/gradle-4.10.2-all/，将gradle-4.10.2-all文件删除， 再次运行（点击图2-8所示的绿色三角按钮）即可，这 个时候就可以在手机上看到运行效果了

2.3.2 iOS手机调试运行

可以使用iOS模拟器查看效果，因为模拟器的效果 和真机一样。在Android Studio设备选择中选择 “open iOS Simulator”创建iOS模拟器，如图2-11所 示。

模拟器创建成功后击“运行” ，运行效果如图2-12所示。

这时我们看到Flutter App已经运行起来了，点击 “+”按钮，屏幕中间的数字就会加1，这个效果的实 现代码在lib\main.dart中。

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

这是入口函数，运行MyApp。MyApp类如下所示：

其中，MaterialApp表示使用Material风格（第3 章会具体介绍Material风格组件）；title为标题； theme为主题，这里可以设置全区主题（第3章会具体 介绍theme）；home为首页，当前加载的Widget，例子 中加载的是MyHomePage Widget。 MyHomePage如下所示： 

createState方法中创建了_MyHomePageState，如下所示：

其中，_counter属性就是App上展示的数字； incrementCounter方法对counter执行加1操作，点击

“+”按钮调用此方法；setState方法中加1会更新到屏幕上；Scaffold是和Material配合使用的控件；

AppBar是顶部的区域，如图2-13所示。

body表示AppBar以下区域；Center为容器类控件，子控件居中显示；Column为容器类控件，子控件垂直排列；Text为文本控件；FloatingActionButton为按钮控件，也就是App中“+”按钮。上面一些控件和方法在后面的相应章节中会具体介绍。

2.4　设置App名称、图标

当我们发布一款App的时候，最重要的就是确定App名称和图标，下面介绍如何设置、修改App名称和图标。

2.4.1　Android设置App名称、图标

打开 android→app→src→main→AndroidManifest.xml，如图2-14所示。

label和icon属性表示App的名称和图标。label比较简单，我们可随意更改，例如改为“Flutter实战入

门”。icon的值默认是@mipmap/ic_launcher，其中mipmap是Android的一类资源，在 android→app→src→main→res下，如图2-15所示。 因此，只需要用我们的icon图片替换掉原来的 ic_launcher.png即可，图片名称要一样。目录中有 mipmap-mdpi、mipmap-hdpi、mipmap-xdpi、mipmapxxdpi、mipmap-xxxdpi，这代表不同分辨率的手机加 载不同的图片。手机分辨率越高，加载的图标分辨率 越高，正常情况下，mipmap-mdpi放置48×48（像素， 下同）的图标，mipmap-hdpi存放72×72，mipmapxdpi存放96×96，mipmap-xxdpi存放144×144， mipmap-xxxdpi存放192×192。

2.4.2　iOS设置App名称、图标

打开ios→Runner→Info.plist文件，<key>CFBundleName</key>下面的值表示App的名称，如图2-16所示。

修改App的名称为“Flutter实战入门”。 打开 ios→Runner→Assets.xcassets→AppIcon.appiconse t，如图2-17所示。

                                               图2-17 iOS设置App图标

我们只需将这个文件夹里的图片替换为我们的图标即可，注意名称和分辨率保持一致。修改后的效果如图2-18所示。

2.5 设置App启动页 绝大部分App在启动的时候会出现一个大概3秒左 右的启动页（也叫闪屏页），然后再进入主页。做过 原生开发的人都知道，启动页是为了避免白屏现象。 Flutter项目的启动页是在原生端处理的，那为什么不 在Flutter端处理呢？这也是为了避免白屏现象，加载 Flutter预处理相对比较耗时。下面讲解如何设置启动 页。

2.5.1 Android设置启动页

打开 android→app→src→main→AndroidManifest.xml， 如图2-19所示。 图2-19圈中部分的value值为true，代表开启“启 动页” ，如果设置为false，则不开启“启动页”。 打开 android→app→src→main→res→drawable→launch_ background.xml，如图2-20所示。 默认的启动页是白色的，若要换成图片，首先把 名为splash.png的图片拷贝到drawable目录下，然后 将如下代码添加到layer-list中：

图2-20 启动页

效果如图2-21所示。 Android启动页的图片我们就设置完成了。

2.5.2 iOS设置启动页

iOS设置启动页相对比较简单，打开 ios→Runner→Assets.xcassets→LaunchImage.image set，如图2-22所示。 将LaunchImage.png、LaunchImage@2x.png、 LaunchImage@3x.png替换为我们自己的启动页图片即 可，注意保持名称、图片分辨率一致。

2.6 App构建发布

当App开发完成后，需要将App发布到各大商店上 线，此时需要构建Android端和iOS端App，本节将介绍 如何构建Android端和iOS端App。

2.6.1 Android构建发布

当App开发完成后，我们需要构建release版本发 布到应用商店。在开始构建release版本前需要做的准 备工作包括：gradle配置设置、创建并引用签名、开 启混淆等。下面分别介绍。

1.gradle配置设置

打开android→app→build.gradle，需要注意以 下几个配置

。 ·applicationId：表示包名，在创建App的时候已经 确定好了，一般不需要修改。 ·minSdkVersion：指定最低级的API版本，16代表 Android的版本为4.1，一般指定16即可，16以下的手机 基本没有了。

·versionCode和versionName表示版本号和版本名 称，版本号通常是从1开始累加的整数，版本名称一般 格式如1.0.0。版本号和版本名称的设置在 android→local.properties文件中。

2.创建并引用签名

如果App还没有keystore（签名文件），则需要创 建一个；如果有则略过。使用Android Studio创建keystore的步骤如下： 1）打开File→Open，选择当前Flutter App的 android目录，点击“Open” ，此时打开的是纯 Android项目。打开后点击Build→Generate Signed Bundle/APK，如图2-23所示。 此时出现创建keystore引导，如图2-24所示。

2）选择APK选项，点击“Next”按钮，出现的界面如图2-25所示。

3）点击“Create new”按钮，出现的界面如图2-26所示。在其中填写如下keystore的信息。

·key store path：签名的存放路径，一般我们放在当前App下。

·Password：签名密码。 ·Confirm：签名密码确认。

·Alias：签名的别名，这个随便起，就像人的小名 一样。

·Alias下面的Password：别名密码。

·Alias下面的Confirm：别名密码确认。

·Country Code：区域简称，我们一般写“ zh” ， 代表中国。 其他可以省略。 注意选择Key store path路径时指定到app目录 下，点击“OK” ，此时签名已经创建好了。直接关闭 当前对话框，打开android/app/build.gradle文件， 找到buildTypes，将如下代码：

添加到buildTypes同级别上，如下所示： 

3.开启混淆（可以略过）

混淆不是必须的，但开启混淆将缩减apk文件的大小，还可以防止别人反编译我们的代码。打开

android/app/build.gradle文件，找到buildTypes，将如下代码添加到buildTypes中：

minifyEnabled true

useProguard true

proguardFiles getDefaultProguardFile('proguard- android.txt'),

'proguard-rules.pro'

结果如下所示：

设置为true，代表打开了混淆，proguardrules.pro是混淆文件。Flutter默认情况下不开启混淆，所以没有创建此文件，需要手动在android/app下创建proguard-rules.pro，并添加如下混淆规则：

 

这个混淆规则只是混淆了Flutter引擎库，如果还有其他第三方库则需要添加与之对应的混淆规则。

4.开始构建

打开Android Studio，点击底部的“Terminal”窗口，执行命令：flutter build apk，效果如下：

 表明构建成功，生成的apk的目录是：

build/app/outputs/apk/release/app-release.apk。

2.6.2 iOS构建发布

iOS构建发布的步骤如下：

1）在 https://developer.apple.com/support/app-storeconnect/上注册一个Apple开发者账号。

2）账号注册完成后创建一个应用，每一个应用都 需要一个Bundle ID，这个Bundle ID相当于唯一标 识。Bundle ID要与项目中的Bundle ID保持一致。

3）双击ios/Runner.xcodeproj文件，Xcode将会 打开此项目的iOS部分，点击Runner，选择General选 项卡，界面如图2-27所示。

其中各选项说明如下。

·Display Name：App名称。

·Bundle Identifier：App唯一标识，与开发者账号 中应用的Bundle ID保持一致。

·Automatically manage signing：Xcode自动管理签 名，大多数情况下勾选。

·Team：与Android的签名文件一样，iOS是和 Apple账号绑定的，需要选择Add Account。 ·Deployment Target:设置应用支持的最低iOS版 本。Flutter支持iOS 8.0及更高版本。 此时打开终端，进入当前App目录cd<app目录>， 执行命令：flutter build ios，也可以在Android Studio的Terminal中执行如上命令。

2.7　本章小结

本章介绍了Flutter项目的创建、运行调试、构建等基础知识，便于读者从整体上了解Flutter项目，为接下来的学习打好基础。