Mac搭建Flutter开发环境
Flutter简介
Flutter 是Google开发的一个移动跨平台（Android 和 iOS）的开发框架，使用的是 Dart 语言。和 React Native 不一样的是，Flutter 框架并非一个严格意义上的原生应用开发框架。Flutter 的目标是用来建立高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。而且开发出来的应用在不一样的平台用起来跟原生应用具备同样的体验。html
Flutter 包含了一个函数响应式框架（ functional-reactive framework）、一个 2D 渲染引擎、直接可用的 Widget 库、和各类开发工具。这些组件在一块儿配合使用，能够帮助开发者完成设计、开发、测试和调试应用的工做。react
Widget
Widget 是每一个 Flutter 应用的基础组成部分，每一个 Widget 是用户界面最基本的元素。和其余框架把 View、controller、 Layout 和其余资源分开定义不同，Flutter 具备一致的、惟一的对象模型： Widget。android
一个 Widget 具备以下的一些做用：ios
- 一个结构性的元素（好比 按钮或者菜单）
- 一个元素的风格（好比 字体或者颜色）
- 指定布局属性（好比 padding）
- 也能够包含一些业务逻辑
- 以及其余等等
Widget 经过组合来组成特有的页面层级结构，每一个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。 而且，Widget没有单独的 “application” 对象，根 Widget 就至关于application。git
布局/样式
首先从宏观上来讲，Flutter 中的布局、样式中绝大多数的概念其实仍是沿用了 CSS 中的概念。例如在布局方面与 CSS 中 flex 布局对应的有 Row、Column 两个 Widget，分别提供了水平和垂直两个方向的布局方式。再好比 Stack Widget 提供了一种 Widget 之间相互堆叠的机制，这又和 CSS 中的 position:absolute; 很像。github
查看 Flutter 中全部和布局相关的 Widget：flutter.io/widgets/lay…macos
概念上的类似是否是就可让咱们轻松上手了呢？其实并非，由于在具体的代码层面，为 Flutter 中的 Widget 添加样式 和为一个 HTML 元素添加样式仍是有着很大的差异。这些差异主要表如今如下两个方面：编程
1,不是全部 Widget 均可以添加任意的样式属性。
举例来讲，若是你想给一段文字添加一个 border。你必须建立一个 Container，把这段问题设置为这个 Container 的 child。而后给这个 Container 设置一个 BoxDecoration 属性，并在该属性中设置具体的边框样式。例如：api
Container(
decoration:BoxDecoration(
border:Border.all(color:Colors.red)
),
child:newText("My Awesome Border"),
)
复制代码
####2，Flutter样式属性都不在支持以字符串的形式书写。 因为 Dart 面向对象的特色，基本上全部的样式属性都不在支持以字符串的形式书写，而是必须建立特定类的实例或是使用 Flutter 中预先定义好的常量。例如：xcode
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 框架有几层结构，每层都依赖其下面的一层结构。其架构图以下图：
这些层级为构建应用提供了不少种选择。使用自定义的方式构建应用可使用框架的全部功能，或者使用 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
复制代码
运行该命令后，系统会检测设备相关的依赖状况，以下图：
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命令在任何终端会话中。
对于全部终端会话永久修改此变量的步骤是和特定计算机系统相关的。一般，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如：
- 肯定您Flutter SDK的目录，您将在步骤3中用到。
- 打开(或建立) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不一样。
- 添加如下行并更改[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”
- 运行 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，步骤以下：
- 下载并安装 Android Studio。
- 启动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；以下图：
运行项目
Flutter项目的运行也很是的简单，定位到Android Studio 工具栏，而后点击运行按钮便可，以下图。
VSCode
安装插件
按组合键【 command+shift+x】，打开应用商店，而后搜索“dart code”点击安装，以下图：
建立新项目
打开VSCode->选择查看->命令面板->输入指令flutter create Project名称，点击肯定，便可建立Flutter应用。
Flutter项目结构
使用Android Studio打开建立的Flutter项目，以下图：
- android目录：存放的是Flutter与android原生交互的一些代码，这个路径的文件和建立单独的Android项目基本是同样的。
- ios目录：存放的是Flutter与ios原生交互的一些代码。
- lib：存放的是Dart语言编写的代码，也是项目的核心代码。
- pubspec.yaml：项目依赖配置文件，做用相似于Android的build.gradle或者iOS的cocospod。例如刚才建立的项目的pubspec.yaml里面的：cupertino_icons: ^0.1.2，表示项目要依赖cupertino_icons这个库，版本号为0.1.2。
扩展阅读： [1]gmtc.geekbang.org/
[2]marketplace.visualstudio.com/items?itemN…
[5]en.wikipedia.org/wiki/Just-i…
[6]en.wikipedia.org/wiki/Ahead-…
- 1. Flutter开发环境搭建Mac版
- 2. Mac搭建Flutter开发环境
- 3. Flutter开发-环境搭建
- 4. Flutter 开发环境搭建
- 5. Flutter开发环境搭建
- 6. 01-mac flutter环境搭建
- 7. mac下flutter环境搭建
- 8. flutter环境搭建mac版
- 9. Mac下flutter环境搭建
- 10. mac os flutter环境搭建
- 更多相关文章...
- • Swift 环境搭建 - Swift 教程
- • Rust 环境搭建 - RUST 教程
- • PHP开发工具
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Flutter开发环境搭建Mac版
- 2. Mac搭建Flutter开发环境
- 3. Flutter开发-环境搭建
- 4. Flutter 开发环境搭建
- 5. Flutter开发环境搭建
- 6. 01-mac flutter环境搭建
- 7. mac下flutter环境搭建
- 8. flutter环境搭建mac版
- 9. Mac下flutter环境搭建
- 10. mac os flutter环境搭建