Flutter入门与环境搭建-程序员宅基地

技术标签： git  移动开发  xcode  

Flutter简介

Flutter 是Google开发的一个移动跨平台（Android 和 iOS）的开发框架，使用的是 Dart 语言。和 React Native 不同的是，Flutter 框架并不是一个严格意义上的原生应用开发框架。Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。

Flutter 包含了一个函数响应式框架（ functional-reactive framework）、一个 2D 渲染引擎、直接可用的 Widget 库、和各种开发工具。这些组件在一起配合使用，可以帮助开发者完成设计、开发、测试和调试应用的工作。

Widget

Widget 是每个 Flutter 应用的基础组成部分，每个 Widget 是用户界面最基本的元素。和其他框架把 View、controller、 Layout 和其他资源分开定义不一样，Flutter 具有一致的、唯一的对象模型： Widget。

一个 Widget 具有如下的一些作用：

  • 一个结构性的元素（比如 按钮或者菜单）
  • 一个元素的风格（比如 字体或者颜色）
  • 指定布局属性（比如 padding）
  • 也可以包含一些业务逻辑
  • 以及其他等等

Widget 通过组合来组成特有的页面层级结构，每个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。 并且，Widget没有单独的 “application” 对象，根 Widget 就相当于application。

布局/样式

首先从宏观上来说，Flutter 中的布局、样式中绝大多数的概念其实还是沿用了 CSS 中的概念。例如在布局方面与 CSS 中 flex 布局对应的有 Row、Column 两个 Widget，分别提供了水平和垂直两个方向的布局方式。再比如 Stack Widget 提供了一种 Widget 之间相互堆叠的机制，这又和 CSS 中的 position:absolute; 很像。

查看 Flutter 中所有和布局相关的 Widget：flutter.io/widgets/lay…

概念上的相似是不是就可以让我们轻松上手了呢？其实并不是，因为在具体的代码层面，为 Flutter 中的 Widget 添加样式 和为一个 HTML 元素添加样式还是有着很大的差别。这些差别主要表现在以下两个方面：

1,不是所有 Widget 都可以添加任意的样式属性。

举例来说，如果你想给一段文字添加一个 border。你必须创建一个 Container，把这段问题设置为这个 Container 的 child。然后给这个 Container 设置一个 BoxDecoration 属性，并在该属性中设置具体的边框样式。例如：

Container(
  decoration:BoxDecoration(
    border:Border.all(color:Colors.red)
),
  child:newText("My Awesome Border"),
)
复制代码

####2，Flutter样式属性都不在支持以字符串的形式书写。 由于 Dart 面向对象的特点，基本上所有的样式属性都不在支持以字符串的形式书写，而是必须创建特定类的实例或是使用 Flutter 中预先定义好的常量。例如：

ListView.builder(

  scrollDirection:Axis.horizontal,

  padding:EdgeInsets.all(10.0),

  itemCount:subCategories.length,

  itemBuilder:(BuildContext context,int index){ }

)
复制代码

这里为了指定 ListView 的滚动方向，我们使用了 Flutter 中预先定义好的 Axis.horizontal 常量，为了表示 4 个方向上的 padding 值，我们创建了一个 EdgeInsets 类的实例。

组合大于继承

Widget 通常通过组合的方式来构建复杂的 UI。例如，常用的 Container Widget 就是由几个分别负责 布局、绘制、布局和计算大小的 Widget 组成。

具体来说，Container 由LimitedBox，ConstrainedBox，Align，Padding，DecoratedBox和 Transform组成。如果要自定义 Container 来实现自定义效果，相比使用继承而言，可以使用组合一些简单的 Widget 实现自定义效果。

分层架构

Flutter 框架有几层结构，每层都依赖其下面的一层结构。其架构图如下图：

开发应用的时候，经常使用最上面的层级提供的功能。 这种层级结构的设计是为了让你用更少的代码实现更多的功能。比如，Material 层 是使用了 Widget 层的控件来构建的，而 Widget 层 依赖下面的 Rendering 层来构建的。

这些层级为构建应用提供了很多种选择。使用自定义的方式构建应用可以使用框架的所有功能，或者使用 Widget 层的控件可以实现 UI 效果。 可以直接使用 Flutter 提供的 Widget 也可以自定义各种 Widget，如果上层实现不满足你的要求，还可以直接使用更底层的功能来自定义。

Flutter框架与其他移动开发框架的区别

原生应用的区别

Flutter 应用运行在一个用 C++ 写的引擎中，Flutter 应用可以看做是一个游戏 App，代码都是在 引擎中运行。 对于 Android 应用来说，Flutter 框架在引擎中实现了一个 继承于 SurfaceView 的 FlutterView 中，用户所看到的 UI 都是在这个 SurfaceView 中显示。如果要和原生平台功能交互，则可以在 Activity 中使用 FlutterView，并通过 Flutter 提供的消息 API 和原生平台收发消息。

与React Native 应用的区别

和React Native相比，主要有以下的一些区别：

  • 使用的编程语言不同，Flutter 使用的是 谷歌自己新的 Dart语言，新的语言可以吸收很多其他成功编程语言的特性，更具有表达性，编码效率更高，而 React Native 使用的 JavaScript语言。
  • React Native 是把应用编译为原生控件运行，这样在转换的时候会有性能损耗，并且有些平台特性可能无法做成跨平台使用。

目前，Flutter的首个发布预览版（Release Preview 1）正式发布，这标志着谷歌进入了Flutter正式版（1.0）发布前的最后阶段，相信在不久的将来，Flutter将会被使用的越来越广泛。

Flutter开发环境搭建

“工欲善其事，必先利其器”，学习任何一门语言、技术，都需要从环境搭建开始，学习Flutter就从环境搭建开始。搭建环境最好参考官网的文档进行操作：flutterchina.club/get-started…

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求：

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）
  • 工具: Flutter 依赖下面这些命令行工具，如bash, mkdir, rm, git, curl, unzip, which等

获取Flutter SDK

要获得Flutter，请先使用git克隆Flutter，然后将该flutter工具添加到您的用户路径。运行 flutter doctor 显示您可能需要安装的剩余依赖项。

Clone Flutter

如果是第一次在此机器上安装Flutter，请克隆flutter的分支源码，然后将该flutter工具添加到系统的环境变量中。例如：

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH 
复制代码

这里的pwd/flutter/bin:PATH 可以使用刚才的克隆的flutter的源码的路径，如“`/Users/xiangzhihong/Flutter/flutter/bin: PATH`”

说明：关于如何在mac上配置环境变量，请自行查询相关资料。

运行 flutter doctor

运行以下命令来查看是否需要安装其它依赖项，如果缺乏相关的依赖，系统会给出提示。

flutter doctor
复制代码

运行该命令后，系统会检测设备相关的依赖情况，如下图：

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）。例如： 

Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.
复制代码

如果提示xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等，请按照提示解决。下面贴一个笔者本机(mac)的环境变量配置：

export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录，替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。一旦你安装了任何缺失的依赖，请再次运行“flutter doctor”命令来验证你是否已经正确地设置。

更新环境变量

您在命令行只能更新当前会话的PATH变量，如Clone Flutter repo所示。 但是，您可能需要的是永久更新此变量，以便您可以运行flutter命令在任何终端会话中。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如：

  1. 确定您Flutter SDK的目录，您将在步骤3中用到。
  2. 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同。
  3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径。
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
复制代码

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径，比如“~/document/code”

  1. 运行 source $HOME/.bash_profile 刷新当前终端窗口。

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ～/.zshrc ，在其中添加：source ～/.bash_profile 2. 通过运行flutter/bin命令验证目录是否在已经在PATH中。命令为：

flutter/bin
复制代码

macOS支持为iOS和Android开发Flutter应用程序。现在完成两个平台设置步骤中的至少一个，以便能够构建并运行您的第一个Flutter应用程序。

iOS 设置

安装 Xcode

要为iOS开发Flutter应用程序，您需要Xcode 7.2或更高版本:

  • 安装Xcode 7.2或更新版本，可以通过APP Stroe来安装。
  • 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
  • 确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意。

设置iOS模拟器

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

1，在Mac上，通过Spotlight或使用以下命令找到模拟器，命令如下：

open -a Simulator
复制代码

2，通过检查模拟器 硬件>设备 菜单中的设置，确保您的模拟器正在使用64位设备（iPhone 5s或更高版本）。

3，根据您的开发机器的屏幕大小，模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例。

4，运行 flutter run启动您的应用。

安装到iOS设备

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

1，安装 homebrew （如果已经安装了brew,跳过此步骤）。 2，打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具。

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
复制代码

如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题。

遵循Xcode签名流程来配置您的项目。

a，在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace。 b，在Xcode中，选择导航面板左侧中的Runner项目。 c，在Runner target设置页面中，确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时，Xcode会创建并下载开发证书，向您的设备注册您的帐户，并创建和下载配置文件（如果需要）。例如：

Android设置

安装Android Studio

要为Android开发Flutter应用，您可以使用Mac，Windows或Linux（64位）机器.

Flutter需要安装和配置Android Studio，步骤如下：

  1. 下载并安装 Android Studio。
  2. 启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的。

###设置您的Android设备

要准备在Android设备上运行并测试您的Flutter应用，您需要安装Android 4.1（API level 16）或更高版本的Android设备.

  • 在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
  • 使用USB将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
  • 在终端中，运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
  • 运行启动您的应用程序 flutter run。

默认情况下，Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想让Flutter使用不同版本的Android SDK，则必须将该 ANDROID_HOME 环境变量设置为SDK安装目录。

设置Android模拟器

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：

  • 在您的机器上启用 VM acceleration ；
  • 启动 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。

开发工具及插件

开发Flutter应用需要 Android Studio和VSCode配合使用。一方面，VSCode 提供了非常好的代码提示功能。，而在 Android Studio 中，或许是 Android Studio 上的 dart 插件目前功能还不够完善的原因，代码提示和开发功能并不是很强大。

Android Studio

安装插件

使用Android Studio开发Flutter移动应用，需要先安装Flutter和Dart插件。Android Studio安装插件的步骤如下： 进入Plugins -> Browse Repositories-> 搜索Flutter-> 点击install。

新建项目

打开AndroidStudio->选择 Start a new Flutter project ->选择 Flutter Application；如下图：

VSCode

安装插件

按组合键 command+shift+x，打开应用商店，然后搜索“dart code”点击安装。

创建新项目

打开VSCode->选择查看->命令面板->输入指令Flutter New Project，点击确定。

扩展阅读： [1]gmtc.geekbang.org/

[2]marketplace.visualstudio.com/items?itemN…

[3]flutter.io/sdk-archive…

[4]www.dartlang.org/

[5]en.wikipedia.org/wiki/Just-i…

[6]en.wikipedia.org/wiki/Ahead-…

[7]www.dartlang.org/guides/lang…

[8]api.dartlang.org/dev

[9]hackernoon.com/why-flutter…
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33811961/article/details/88004681

智能推荐

HTML5 Web SQL 数据库_方式准则的定义-程序员宅基地

文章浏览阅读1k次。1、HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。2、核心方法 以下是规范中定义的三个_方式准则的定义

spring Boot 中使用线程池异步执行多个定时任务_springboot启动后自动开启多个线程程序-程序员宅基地

文章浏览阅读4.1k次，点赞2次，收藏6次。spring Boot 中使用线程池异步执行多个定时任务在启动类中添加注解@EnableScheduling配置自定义线程池在启动类中添加注解@EnableScheduling第一步添加注解，这样才会使定时任务启动配置自定义线程池@Configurationpublic class ScheduleConfiguration implements SchedulingConfigurer..._springboot启动后自动开启多个线程程序

Maven编译打包项目 mvn clean install报错ERROR_mvn clean install有errors-程序员宅基地

文章浏览阅读1.1k次。在项目的target文件夹下把之前"mvn clean package"生成的压缩包(我的是jar包)删掉重新执行"mvn clean package"再执行"mvn clean install"即可_mvn clean install有errors

navacate连接不上mysql_navicat连接mysql失败怎么办-程序员宅基地

文章浏览阅读974次。Navicat连接mysql数据库时，不断报1405错误，下面是针对这个的解决办法：MySQL服务器正在运行，停止它。如果是作为Windows服务运行的服务器，进入计算机管理--->服务和应用程序------>服务。如果服务器不是作为服务而运行的，可能需要使用任务管理器来强制停止它。创建1个文本文件(此处命名为mysql-init.txt)，并将下述命令置于单一行中：SET PASSW..._nvarchar链接不上数据库

Python的requests参数及方法_python requests 参数-程序员宅基地

文章浏览阅读2.2k次。Python的requests模块是一个常用的HTTP库，用于发送HTTP请求和处理响应。_python requests 参数

近5年典型的的APT攻击事件_2010谷歌网络被极光黑客攻击-程序员宅基地

文章浏览阅读2.7w次，点赞7次，收藏50次。APT攻击APT攻击是近几年来出现的一种高级攻击，具有难检测、持续时间长和攻击目标明确等特征。本文中，整理了近年来比较典型的几个APT攻击，并其攻击过程做了分析（为了加深自己对APT攻击的理解和学习）Google极光攻击2010年的Google Aurora(极光)攻击是一个十分著名的APT攻击。Google的一名雇员点击即时消息中的一条恶意链接，引发了一系列事件导致这个搜_2010谷歌网络被极光黑客攻击

随便推点

微信小程序api视频课程-定时器-setTimeout的使用_微信小程序 settimeout 向上层传值-程序员宅基地

文章浏览阅读1.1k次。JS代码 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { setTimeout( function(){ wx.showToast({ title: '黄菊华老师', }) },2000 ) },说明该代码只执行一次..._微信小程序 settimeout 向上层传值

uploadify2.1.4如何能使按钮显示中文-程序员宅基地

文章浏览阅读48次。uploadify2.1.4如何能使按钮显示中文博客分类：uploadify网上关于这段话的搜索恐怕是太多了。方法多也试过了不知怎么，反正不行。最终自己想办法给解决了。当然首先还是要有fla源码。直接去管网就可以下载。[url]http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4...

戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）_vmware-vcsa-all-6.7.0-8169922.iso-程序员宅基地

文章浏览阅读9.6k次，点赞5次，收藏36次。戴尔服务器安装VMware ESXI6.7.0教程（U盘安装）一、前期准备1、下载镜像下载esxi6.7镜像：VMware-VMvisor-Installer-6.7.0-8169922.x86_64.iso这里推荐到戴尔官网下载，Baidu搜索“戴尔驱动下载”，选择进入官网，根据提示输入服务器型号搜索适用于该型号服务器的所有驱动下一步选择具体类型的驱动选择一项下载即可待下载完成后打开软碟通（UItraISO），在“文件”选项中打开刚才下载好的镜像文件然后选择启动_vmware-vcsa-all-6.7.0-8169922.iso

百度语音技术永久免费的语音自动转字幕介绍 -程序员宅基地

文章浏览阅读2k次。百度语音技术永久免费的语音自动转字幕介绍基于百度语音技术，识别率97%无时长限制，无文件大小限制永久免费，简单，易用，速度快支持中文，英文，粤语永久免费的语音转字幕网站: http://thinktothings.com视频介绍 https://www.bilibili.com/video/av42750807 ...

Dyninst学习笔记-程序员宅基地

文章浏览阅读7.6k次，点赞2次，收藏9次。Instrumentation是一种直接修改程序二进制文件的方法。其可以用于程序的调试，优化，安全等等。对这个词一般的翻译是“插桩”，但这更多使用于软件测试领域。【找一些相关的例子】Dyninst可以动态或静态的修改程序的二进制代码。动态修改是在目标进程运行时插入代码(dynamic binary instrumentation)。静态修改则是直接向二进制文件插入代码(static b_dyninst

在服务器上部署asp网站,部署asp网站到云服务器-程序员宅基地

文章浏览阅读2.9k次。部署asp网站到云服务器 内容精选换一换通常情况下，需要结合客户的实际业务环境和具体需求进行业务改造评估，建议您进行服务咨询。这里仅描述一些通用的策略供您参考，主要分如下几方面进行考虑：业务迁移不管您的业务是否已经上线华为云，业务迁移的策略是一致的。建议您将时延敏感型，有快速批量就近部署需求的业务迁移至IEC；保留数据量大，且需要长期稳定运行的业务在中心云上。迁移方法请参见如何计算隔离独享计算资源..._nas asp网站

推荐文章

热门文章

相关标签