Hello World

groupones
5,430 阅读9分钟

欢迎点赞，转载请注明出处

创建一个Flutter App

如果按照前文Flutter SDK，以及在Android Studio正确配置Flutter Plugins插件后，启动Android Studio可以看到以下界面：

选择 Start a new Flutter project，然后显示如下界面：

也可以进入Android Studio后，选择File->New->New Flutter Project，进行创建：
w8HXo4tlbgNs6Bk
选择默认的Flutter Application，然后显示如下界面：

选择Next，然后再如下界面Company domain内中填写一个域名，如dmt.zust.edu.cn，用于生成Flutter项目的包名（Package name），保持默认选项，建议不要选 Include Kotlin supprot for Android code和Include Swift support for iOS code：

6OVp9KNm5wFDnIE
点击Finish，稍等片刻一个Flutter项目就建立好了，如下：
NtiIxoVDEYqljuH

安卓设备运行App

简单起见，可以在电脑USB口接入一台安卓真机，链接前需要在开发者选项里设置安卓手机USB调试可用。一般设置的方法是：在安卓设备4.2及更高版本上找到【设置】->点击【关于设备】-> 找到【系统版本号】并连续敲7次；-> 返回【设置】点击【开发人员选项】；-> 打开USB调试模式。
首次链接设备时，安卓设备上一般会有弹框授权是否允许USB调试，如下图，选择始终允许即可：

链接成功后，可以看到下图红框区域（ target selector）内可以显示安卓手机型号：
点击绿色三角箭头（Run），将运行我们刚才新建的第一个Flutter程序，可以看到程序运行各个过程提示，第一次运行时可能会需要多等待一些时间，用于依赖项的下载与同步：
U3MzS4xThiXyALp
安卓真机实际运行效果如下，注意界面的右上角有个DEBUG字样，表示项目运行在调试模式下：
xX5bpsEOhym3PCU

热重载

Flutter提供一种不需要应用重新启动，修改代码可以实时生效的热重载功能。

  1. 保持App程序不退出状态，打开lib\main.dart文件:

2. 将第95行 'You have pushed the button this many times:'改为'你可以多次点击按钮'。 3. 点击工具栏保存按钮，(mascOS快捷键:⌘+S，windows快捷:Ctrl+S)，可以立即看到真机运行界面生效。
alehbW5IsGYoSDB
可以观察到Android Studio控制台热加载过程提示：

苹果设备运行App

苹果手机通过USB链接电脑，选择信任电脑。在Android Studio里选择连接的苹果设备，运行Flutter App，首次运行时会提示"No valid code signing certificates were found"，因为苹果项目需要设置一个iOS开发证书和配置文件（Provisioning Profile）：

根据上图提示，使用Xcode打开Flutter项目下的ios/Runner.xcworkspace，界面如下：
依照下图所示，选择到Signing&Capabilties选项卡下（非General下）：
点击Add Account...，输入之前你创建的Apple ID和密码，选择Role为User类型的Team，个人Apple ID都有此类型，如果是企业开发者账号，Role角色为Member类型：
关闭上面界面的窗口，则可以看到Signing Certification显示正常
在Xcode中执行Product->Run，如果弹出以下界面，则输入macOS系统登录密码，选择始终允许，如果该窗口弹出多次，都选择始终允许即可：
Xcode会产生一些Warnings可以忽略，或者根据Xcode提示执行，或执行Product->Clean Build Folder，可以清理部分Warnings：
执行Run时，保持苹果设备不要处于锁屏状态，Run完成后会弹出以下界面：
根据弹框提示，去苹果手机上依次做以下设置：
再次在Xcode执行Run，可以看到Flutter App可以安装在苹果手机上并正确执行，显示效果同安卓真机效果：
关闭Xcode，使用Android Studio打开Flutter项目运行，苹果手机运行效果同上一致，此时控制输出信息如下：

注：需要始终保持苹果设备有一个已经认证安装过的Flutter App，这样可以避免苹果设备重复设置个人开发证书信任。

项目结构

编译运行后的项目结构如下图：

wMFRcEpG1WoTmgy
其中，build目录是运行时生成的临时文件夹，占用了整个项目大部分存储空间，备份或git提交时是没有必要的。其他一些不需要提交的文件和文件夹有：

  • .dart_tool/
  • .packages
  • pubspec.lock
  • ios/Flutter/App.framework
  • ios/Flutter/Flutter.framework

如果使用的是JetBrains公司的IDE, .idea/目录也不需要提交。

完整的不需要提交的文件清单，参见官方提供的.gitigore说明

安卓模拟器

Windows系统下，手头没有安卓真机的童鞋，可以使用Android Studio自带的模拟器（Emulator），也可以安装第三方模拟器软件，如Genymotion，下载及使用可以参考小张童鞋的介绍。
macOS系统下，没有真机的，直接使用Xcode的模拟器（Simulator）会比较方便一些。
Android 模拟器除了需要满足 Android Studio 的基本系统要求之外，还需要满足下述其他要求：

  • SDK Tools 26.1.1 或更高版本
  • 64 位处理器
  • Windows：支持 UG（无限制访客）的 CPU
  • HAXM 6.2.1 或更高版本（建议使用 HAXM 7.2.0 或更高版本）

要在 Windows 还需要满足以下其他要求：
  • 在 Windows上搭载 Intel 处理器：Intel 处理器需要支持 Intel VT-x、Intel EM64T (Intel 64) 和 Execute Disable (XD) Bit 功能
  • 在 Windows 上搭载 AMD 处理器：需要 Android Studio 3.2 或更高版本以及支持 Windows Hypervisor Platform (WHPX) 功能的 2018 年 4 月发布的 Windows 10 或更高版本

创建和管理安卓模拟器虚拟设备是比较容易，这里不就展开描述了。如果有疑问，可以参考官方说明。

常见问题

出现问题时，不妨先运行flutter doctor，根据运行提示修复错误。即使之前flutter doctor检测都是通过的，但随着使用环境的变化，还是有可能再次出现错误的。

  • Flutter SDK path not given，如下图：
    可以检查下系统环境变量，PATH设置里是否有正确指向flutter的安装目录； 或者是在界面的Flutter SDK path一栏进行人工选择，或进入AS里全局设置，如下图：
  • The flutter SDK installation is incomplete，如下图：
    执行flutter doctor进行诊断，或者使用flutter upgrade重新更新下载。
  • Could not resolve io.flutter:flutter_embedding_debug...
    可能是flutter 1.12版本稳定性问题，可以考虑回退到上一个稳定版本，如flutter 1.9。
  • User rejected permission
    JlvtK7fOhrCnQXI
    第一次运行时，在安卓手机上人工同意信任电脑链接使用。
  • Gradle Synce Issues: Read timed out
    j8Abg1f9RKEeULH
    或运行时卡死，显示类似如下界面：
    9GIyEr2mkiDo6FU
    由于Gradle源在国外，同步下载依赖项目比较慢，可以考虑更换为阿里国内镜像服务地址。更新android文件夹下的build.gradle文件（注：不是android/app build.gradle文件）。将以下代码片段：
repositories {
        google()
        jcenter()
        
    }
    
allprojects {
    repositories {
        google()
        jcenter()
        
    }

更新为：

repositories {
        maven {
            url 'https://maven.aliyun.com/repository/google'
        }
        maven {
            url 'https://maven.aliyun.com/repository/public'
        }
        maven {
            url 'https://maven.aliyun.com/repository/jcenter'
        }
    }
    
    
allprojects {
    repositories {
        maven {
            url 'https://maven.aliyun.com/repository/google'
        }
        maven {
            url 'https://maven.aliyun.com/repository/public'
        }
        maven {
            url 'https://maven.aliyun.com/repository/jcenter'
        }
    }
  • Minimun supported Gradle version is ....
    T1JqBID9veWQx7w

由于Android Studio版本所需Gradle版本跟Flutter项目自动生成的Gradle版本不一致造成的。根据界面提示选择Fix Gradle wrapper and re-import project即可。

  • Please configure Android SDK

    WDH7S5z29a8CoJi
    打开File->Project Structure检查，可以看到：
    ehjUGbkPO6rwxtI
    Gradle没有正确配置好。关闭当前项目，File->Open，打开当前项目下的Android目录，可以看到如下：
    wJG8Vmg9yB1PjfI
    然后，Gradle Sync重新执行一遍。如同步成功，关闭当前项目，重新打开之前的Flutter项目即可。
    也可以通过以下方式打开：
    2I8xz9LwDMiNvrE

  • unable to find valid certifcation path to required target

    3XKpnM7Eem8uB2G
    网上的解决可以搜到很多，但不一定可以解决这个问题。可以参考小吴童鞋的解决方案

  • Waiting for another flutter command to release the startup lock...

由于某些异常操作，导致前一个flutter命令没有执行完毕，可以到Flutter安装目录下删除flutter/bin/cache/lockfile这个文件，lockfile文件大小为0字节，只是用于标记作用。

实验一

完成本节项目功能，然后删除无用的文件，将整个项目压缩成一个zip文件，保证zip文件不能超过500Kb。

扩展：关于Gradle

Gradle是专注于灵活性和性能的开源构建自动化工具。Gradle构建脚本是使用Groovy或Kotlin DSL(Domain-Specific Language，领域特定语言)编写的。Gradle支持许多主要的IDE，包括Android Studio，Eclipse，IntelliJ IDEA，Visual Studio 2019和XCode。
如果只想运行现有的Gradle构建，那么如果构建中有Gradle Wrapper，则可以通过构建根目录中的gradlew(macOS下使用这个)和/或gradlew.bat(Windows下使用这个)文件进行识别，而无需安装Gradle。默认新建立的Flutter项目都会有这个文件的，如下图所示，项目使用Gradle 4.10.2版本进行构建，你也可以手工修改这个文件版本信息。

Android Studio构建系统以Gradle为基础，安装并且Android Gradle插件添加了几项专用于构建 Android 应用的功能。虽然 Android插件通常会与 Android Studio的更新步调保持一致，但插件（以及 Gradle 系统的其余部分）可独立于 Android Studio运行并单独更新。且Android Gradle插件可以在 Android Studio 的 File > Project Structure > Project 菜单中指定插件版本，也可以在顶级 build.gradle 文件中进行指定。该插件版本适用于在相应 Android Studio 项目中构建的所有模块。如下图，显示的Gradle插件的版本为3.2.1，你同样也可以手工修改这个文件版本信息：

注意观察此处的build.gradle的文件位置，因为在同级的app目录下，也有一个同名的build.gradle文件，千万不要搞混掉。如果指定的插件版本尚未下载，则Gradle会在下次构建项目时进行下载；或者，也可以在 Android Studio 菜单栏中依次点击Tools > Android > Sync Project with Gradle Files进行下载。
虽然可以手工修改Gradle版本和Gradle插件版本，但并不意味可以随意修改任意的版本号，我们修改它们的版本信息时应该要考虑以下因素：

  • 选择稳定的版本进行更新，并不是版本越新越好；
  • 尽量使保持新项目默认使用的版本信息；
  • 从老的项目升级过的项目，更新版本信息后，可能需要修改app/build.gradle的内容，因为新版对之前版本的语法和用法可能是不兼容的，具体要根据Android Studio构建给出的提示进行对应修改；
  • Android Gradle插件版本跟Gradle版本之间有对应关系，有时修改需要2个同时修改，它们的对应关系如下图：
  • Android Gradle插件版本跟Android SDK Build-Tools也有关系，如Android Gradle插件3.5.0需要SDK Build-Tools 28.0.3或以上的版本，如下图：
  • Android Studio对Android Gradle插件最小版本也是有要求，可根据Android Studio提示进行修改同步即可。

上一篇 Flutter安装(Windows) 下一篇 Hello Widget

avatar
文章
阅读
粉丝