一文读懂跨平台框架 Flutter 的搭建与运行

时间  2019-11-26 标签 一文 读懂 跨平台 框架 flutter 搭建 运行

做者：个推iOS开发工程师 伊泽瑞尔android

Flutter是Google推出的跨平台的解决方案，用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 以前咱们为你们介绍了《跨平台框架Flutter的优点与结构》，归纳了Flutter选择Dart语言的必要性及其自底而上的框架结构，你们能够点击标题连接来回顾前文。在本文中，咱们将带你们进一步了解Flutter的搭建与运行。ios

 

01git

Flutter开发环境搭建（Windows版）github

1、系统环境要求：要安装并运行Flutter，开发环境必须知足如下条件。macos

  • 操做系统：Windows 7或更高版本（64-bit）；vim

  • 磁盘空间：400MB；windows

  • 工具：Flutter依赖PowerShell 5.0或更新的版本和Git for Windows（Git命令行工具）这些命令行工具。xcode

 

咱们能够去Flutter官网下载最新可用的安装包。bash

下载地址：app

https://flutter.io/sdk-archive/#windows

注意：Flutter的渠道变更频繁，请以官网为准。同时，咱们也推荐去Flutter github项目下下载安装包。

下载地址：

https://github.com/flutter/flutter/releases

 

下载完成后，请先将安装包zip解压到想安装Flutter SDK的路径（注意：不要将Flutter安装到须要高权限的路径，如 C:Files)。以后，在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行。

 

2、更新环境变量：若想在Windows系统自带命令行运行flutter命令，开发者须要添加如下环境变量到用户PATH：“控制面板->用户帐户->更改个人环境变量”，同时，在“用户变量”下检查是否有名为“Path”的条目：若是该条目存在，追加flutter \ bin的全路径，使用；做为分隔符。若是该条目不存在，建立一个新用户变量Path，而后将flutter \ bin的全路径做为它的值。Flutter的执行须要联网，还须要设置：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASH_URL=https://storage.flutter-io.cn

 

3、运行flutter doctor命令：开发者需在Flutter命令行运行flutter doctor命令来查看是否须要安装其它依赖，若是须要，则进行安装。在终端中输入flutter doctor，若是出现和下图相似的结果，甚至获得的x比图示更多，主要缘由是没有安装Android studio。下面咱们将列出Android Studio的安装步骤。

 

4、Android Studio的安装：

  • 在官网下载Android Studio，下载地址：https://developer.android.com/；

  • 启动Android Studio，执行“Android Studio安装向导”并安装最新的Android SDK、Android SDK工具和Android SDK构建工具，这些都是用Flutter进行Android开发所须要的；

  • 打开Android Studio软件，找到Plugin的配置，搜索Flutter插件，出现如图所示页面。点击中间“Search in repositories”，而后点击安装，所有安装完成后需重启。

5、安装Android证书

安装好Android Studio后，再次打开终端（命令行），输入flutter doctor，这时x的数量会明显减小，但可能仍是会遇到1-2个，若是只有1个就说明没有安装证书，开发者只需在终端里执行如下命令便可：

flutter doctor --android-licenses

当提示Y/N选择时，请直接选择Y便可完成安装。

 

02

Flutter开发环境搭建（Mac版）

1、系统环境要求：要安装并运行Flutter，开发环境必须知足如下条件。

  • 操做系统： MacOS（64-bit）；

  • 磁盘空间：大于700M，若是算上Android Studio等编辑工具，尽可能大于3G；

  • 命令行工具：bash、mkdir、rm、git、curl、unzip、which、brew。

 

2、下载Flutter SDK包：

推荐在官网下载，网址：https://flutter.io/setup-macos/ 。

下载完成后，解压安装包到想安装的目录，如:cd ~/development

unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

 

3、配置环境变量

压缩包下载好之后，选择位置进行解压，压缩包解压的位置在下面配置环境变量的时候仍要使用。

首先打开终端工具，使用vim进行配置环境变量，命令以下：

vim ~/.bash_profile

而后，在打开的文件里增长一行代码，配置flutter命令，使其在任何地方均可以使用。添加的代码为：

export PATH=/app/flutter/bin:$PATH

这行命令须要根据压缩包解压的位置来进行编写，内容是你的路径。配置完成后，还需用source命令从新加载，具体命令以下:

source ~/.bash_profile

完成之后， flutter的安装工做已基本完成，但要进行开发，还须要使用命令来检测其是否成功安装。

4、检查开发环境：如上图所示，已经成功安装了Flutter，可是还不具有开发环境，能够用flutter doctor命令来检查还需安装的插件和软件。

 

5、安装Xcode：要为iOS开发Flutter应用程序，须要Xcode9.0或更高版本。

  • 在苹果商店安装Xcode 9.0或更新版本。

  • 配置Xcode命令行工具以使用新安装的Xcode版本，命令以下：

sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer

在大多数的状况下，当你想要使用最新版本的Xcode时，这是正确的路径。若是须要使用不一样版本的Xcode，请指定相应的路径。

  • 确保Xcode许可协议是经过打开一次Xcode或经过命令sudo xcodebuild –license 。

     

6、安装Android Studio：和Windows同样，在Android设备上构建并运行Flutter程序都须要先安装Android Studio。

 

03

升级Flutter

Flutter SDK有多个分支，如beta、dev、master、stable，其中stable为稳定分支，dev和master为开发分支。flutter安装完成后，能够运行flutter channel，查看全部分支。

 

若想升级flutter SDK，须要执行命令：flutter upgrade 。

 

该命令会同时更新Flutter SDK和flutter项目依赖包。若只更新项目依赖包（不包括Flutter SDK），可使用如下命令：

flutter packages get 获取项目全部的依赖包。
flutter packages upgrades 获取项目全部依赖包的最新版本。

 

04

开发工具的配置与使用

1、Android studio配置与使用

首先须要安装两个插件，分别是Flutter和Dart插件：

  • Flutter插件：支持Flutter开发工做流(运行、调试、热重载等)；

  • Dart插件：提供代码分析(输入代码时进行验证、代码补全等)。

1.安装步骤

  • 启动Android Studio；

  • 打开插件首选项 （MacOS：Preferences>Plugins, Windows：File>Settings>Plugins）；

  • 先选择 Browse repositories…，再选择 flutter 插件并点击 install；

  • 重启Android Studio后插件生效。

 

2.建立Flutter应用

  • 选择 File>New Flutter Project ；

  • 选择 Flutter application 做为 project 类型, 而后点击 Next；

  • 输入项目名称 (如 myapp)，点击 Next；

  • 点击 Finish；

  • 等待Android Studio安装SDK并建立项目。

 

3.运行应用程序

  • 定位到Android Studio工具栏；

  • 在 target selector 中, 选择一个运行该应用的Android设备。若是没有列出可用，请选择 Tools>Android>AVD Manager 建立；

  • 在工具栏中点击 Run图标；

  • 若是一切正常,在设备或模拟器上会看到启动的应用程序，以下图所示：

4.体验热重载：Flutter能够经过热重载实现快速的开发周期，热重载无需重启应用程序就能实时加载修改后的代码，而且不会丢失状态。对代码进行简单的更改，而后使用IDE或命令行工具进行从新加载，能够在设备或模拟器上看到更改。

  • 打开`lib/main.dart`文件；

  • 将字符串`'You have pushed the button this many times:'` 更改成`'You have clicked the button this many times:'`；

  • 不要按“中止”按钮，让应用继续运行；

  • 要查看更改，请调用 **Save** (`cmd-s` / `ctrl-s`)，或者点击 **热重载按钮** (带有闪电图标的按钮)。

2、VS Code的配置与使用

1.安装flutter插件：

  • 启动VS Code；

  • 调用View>Command Palette...；

  • 输入'install'后选择Extensions:Install Extension action；

  • 在搜索框输入flutter，在搜索结果列表中选择'Flutter'并点击Install；

  • 选择'OK'并从新启动VS Code；

  • 验证配置：首先，调用View>Command Palette...，输入'doctor'，而后选择'Flutter:Run Flutter Doctor'action。查看“OUTPUT”窗口中的输出是否有问题。

 

2.建立Flutter应用

  • 启动VS Code；

  • 调用View>Command Palette...；

  • 输入'flutter'后选择'Flutter:New Project'action；

  • 输入Project名称(如myapp)并按回车键；

  • 指定防止项目的位置，而后确认；

  • 等待项目建立继续，并显示main.dart文件。

 

3.体验热重载

用VSCode编写Flutter的缺点之一是须要手动加载更新应用，这在必定程度上影响了工做效率。当咱们运行flutter run之后，会出现一段红色的文字提示，以下所示：

  • r 键：点击后热加载，即从新加载；

  • p 键：显示网格，能够掌握布局状况；

  • o 键：切换Android和iOS的预览模式；

  • q 键：退出调试预览模式。

 

4.写一个HelloWorld程序

当咱们搭建好开放环境搭后，按照惯例咱们须要写一个HelloWorld程序。 将下面这段代码写在根目录.dart文件中，做为Flutter主文件。

import 'package:flutter/material.dart';
//主函数（入口函数），下面我会简单说说Dart的函数
void main() =>runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget{
//重写build方法
@override
Widget build(BuildContext context){
//返回一个Material风格的组件
return MaterialApp(
  title:'Welcome to Flutteraa',
  home:Scaffold(
    //建立一个Bar，并添加文本
    appBar:AppBar(
      title:Text('Welcome to Flutter'),
    ),
    //在主体的中间区域，添加一个hello world 的文本
    body:Center(
      child:Text('Hello World'),
    ),
    ),
    );
    }
}

结果以下图所示：

05

链接设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用，而macOS同时支持iOS和Android设备。下面将分别介绍如何链接Android和iOS设备来运行flutter应用。

1、链接Android模拟器

在Android模拟器上运行并测试Flutter应用，请按照如下步骤操做：

  • 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device；

  • 选择一个设备并选择 Next；

  • 为要模拟的Android版本选择一个或多个系统印象，而后选择 Next。建议使用 x86 或 x86_64 image；

  • 在 “Emulated Performance”下, 选择 Hardware - GLES 2.0 以启用硬件加速；

  • 验证AVD配置是否正确，而后选择 Finish；

  • 在“Android Virtual Device Manager”中，点击工具栏的 Run。模拟器启动并显示所选操做系统版本或设备的启动画面；

  • 运行 flutter run 启动您的设备。链接的设备名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

 

2、链接Android真机设备

要准备在Android设备上运行并测试Flutter应用，须要Android 4.1或更高版本的Android设备。

  • 在Android设备上启用开发人员选项和USB调试；

  • 使用USB将手机插入电脑。若是设备出现调试受权提示，请受权你的电脑能够访问该设备；

  • 在命令行运行 flutter devices 命令以验证Flutter识别您链接的Android设备；

  • 运行启动你应用程序 flutter run。

 

3、链接iOS模拟器

要准备在iOS模拟器上运行并测试Flutter应用，请按如下步骤操做：

  • 在你的MAC上，经过 Spotlight 或如下命令找到模拟器:open -a Simulator；

  • 经过检查模拟器 Hardware > Device 菜单中的设置，确保模拟器正在使用64位设备（iPhone 5s或更高版本)；

  • 根据电脑屏幕大小，模拟高清屏iOS设备可能会溢出屏幕。能够在模拟器的 Window> Scale 菜单下设置设备比例；

  • 运行 flutter run，启动flutter应用程序。

 

4、链接iOS真机设备

若是要将Flutter应用安装到iOS真机设备，除了须要一些额外的工具和一个Apple帐户，还须要在Xcode中进行一些设置。

1.安装homebrew(若是已经安装了brew，跳过此步骤)；

2.打开终端并运行以下这些命令：
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
若是这些命令中的任何一个失败并出现错误，须要运行brew doctor并按照说明解决问题

3.遵循Xcode签名流程来配置项目：

在你Flutter项目目录中经过open ios/Runner.xcworkspace打开默认的Xcode workspace。

  • 在Xcode中，选择导航面板左侧中的Runner项目。
    在Runner target设置页面中，确保在General > Signing > Team下选择你的开发团队。当你选择一个团队时，Xcode会建立并下载开发证书，向你的设备注册你的帐户，并建立和下载配置文件。

  • 若是要开始你的第一个iOS开发项目，须要使用你的Apple ID登陆Xcode。任何Apple ID都支持开发和测试，但若想将应用分发到App Store，就必须注册Apple开发者计划。

  • 当你第一次使用attach真机设备进行iOS开发时，须要同时信任你的Mac和该设备上的开发证书。iOS设备首次链接到Mac时，选择信任。而后转到iOS设备上的设置菜单，选择常规>设备管理并信任您的证书。

  • 运行flutter run，启动flutter应用程序。

 

个推技术团队基于Flutter平台也进行了很多开发和探索，其中消息推送插件Getui Flutter Plugin，做为一个特殊的Package，能够为Android和iOS提供底层封装，在Flutter底层提供组件功能，使Flutter能够较为方便地调用Native模块。借助Getui Flutter Plugin，开发者能够快速构建稳定高效的消息推送系统，知足平常的工做需求。

下载连接：

https://github.com/GetuiLaboratory/getui-flutter-plugin 

联系我们 沪ICP备13005482号-10