Flutter初体验--MAC系统Flutter安装使用

Flutter是什么？

  Flutter是谷歌的移动UI框架 ，能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一块儿工做。在全世界，Flutter正在被愈来愈多的开发者和组织使用，而且Flutter是彻底免费、开源的。它也是构建将来的Google Fuchsia  应用的主要方式。

  Flutter组件采用现代响应式框架构建，这是从React中得到的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比以前的描述， 以肯定底层渲染树从当前状态转换到下一个状态所须要的最小更改。   好多小伙伴都在推荐这个框架，因此我决定也来凑一凑热闹，顺便把本身的安装过程分享记录下来。

一、在macOS上搭建Flutter开发环境

  官方文档看这里

使用镜像

  因为在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，你们能够将以下环境变量加入到用户环境变量中(打开终端执行下面命令)：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

获取Flutter SDK

  这里我直接使用git clone命令(YOURPATH为你FlutterSDK安装目录 替换成你想要安装的路径):

cd YOURPATH
git clone -b dev https://github.com/flutter/flutter.git
复制代码

  添加flutter相关工具到path中：

export PATH=`pwd`/flutter/bin:$PATH
复制代码

  运行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 goo.gl/XxQghQ

   • Try re-installing or updating your Android SDK,

   visit flutter.io/setup/#andr… for detailed instructions.   虽然我也出现这个显示，由于我不打算用Android SDK运行因此先忽略了。

更新环境变量

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

  对于全部终端会话永久修改此变量的步骤是和特定计算机系统相关的。一般，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如   一、肯定您Flutter SDK的目录，您将在步骤3中用到。   二、打开(或建立) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不一样.   三、添加如下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:   以个人计算机安装路径为例（个人flutter安装路径： /Users/chaojiwandianshang/Software）：

cd /Users/chaojiwandianshang/Software
 vim .bash_profile
复制代码

  将如下写进bash_profile文件：

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
复制代码

   :wq退出并保存

  用Xcode启动你的Flutter程序

若是你的电脑正常安装xcode直接运行open -a Simulator 启动模拟器

open -a Simulator
复制代码

二、配置编辑器

  官方文档看这里   目前官方推荐的编辑器有Android Studio、VS Code、IntelliJ，我选择的是VS Code：

安装 VS Code

• VS Code, 安装1.20.1或更高版本.

  安装Flutter插件

  1. 启动 VS Code

  2. 调用 View>Command Palette…

  3. 输入 ‘install’, 而后选择 Extensions: Install Extension action

  4. 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 而后点击 Install

  5. 选择 ‘OK’ 从新启动 VS Code

经过Flutter Doctor验证您的设置

  1. 调用 View>Command Palette…

  2. 输入 ‘doctor’, 而后选择 ‘Flutter: Run Flutter Doctor’ action

  3. 查看“OUTPUT”窗口中的输出是否有问题

三、体验

  官方文档看这里

建立新的应用

  1. 启动 VS Code

  2. 调用 View>Command Palette…

  3. 输入 ‘flutter’, 而后选择 ‘Flutter: New Project’ action

  4. 输入 Project 名称 (如myapp), 而后按回车键

  5. 指定放置项目的位置，而后按蓝色的肯定按钮

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

  上述命令建立一个Flutter项目，项目名为myfrstflutterdemo，其中包含一个使用Material 组件的简单的演示应用程序。

  在项目目录中，您的应用程序的代码位于 lib/main.dart.

运行应用程序

  调用Debug>Start Debugging

  等待应用程序启动

  若是一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

体验热重载

  Flutter 能够经过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，而且不会丢失状态（译者语:若是是一个web开发者，那么能够认为这和webpack的热重载是同样的）。简单的对代码进行更改，而后告诉IDE或命令行工具你须要从新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

  用你喜欢的编辑器打开文件lib/main.dart将字符串 'You have pushed the button this many times:' 更改成   'You have clicked the button this many times:'   不要按“中止”按钮; 让您的应用继续运行.   要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮).   你会当即在运行的应用程序中看到更新的字符串

  好了，到如今为止一个简单Flutter的Demo就运行起来了，接下来开启咱们的Flutter学习之旅吧！