Flutter学习之路(一)Flutter简介及Window下开发环境搭建

Flutter简介(内容来自Flutter中文网)

Flutter是什么

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

Flutter的特性

快速开发

毫秒级的热重载，修改后，您的应用界面会当即更新。使用丰富的、彻底可定制的widget在几分钟内构建原生界面。

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上能够在亚秒内重载，而且不会丢失状态

富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。分层的架构容许您彻底自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。

使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而天然的滑动效果和平台感知，为您的用户带来全新体验。

原生性能

Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些均可以在iOS和Android上达到原生应用同样的性能。

经过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter容许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

Window下Flutter开发环境搭建

在Flutter中文网上，关于搭建开发环境的教程已经写得比较详细了，这里笔者但愿经过穿插一些图片，让各位小伙伴能更轻松的搭建好开发环境，工欲善其事，必先利其器，下面就开始开发环境的搭建吧！

安装Git

你须要安装Git做为Flutter SDK的下载工具。

下载FlutterSDK

使用下面的命令下载FlutterSDK

git clone -b beta https://github.com/flutter/flutter.git
复制代码

若是长时间没下载下来或者链接失败 先设置一下这两个环境变量,这是是google为国内开发者搭建的临时镜像。

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

要在终端运行 flutter 命令， 你须要添加如下环境变量到系统PATH：

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

手动配置环境变量

• 转到 控制面板>用户帐户>用户帐户>更改个人环境变量
• 在“用户变量”下检查是否有名为“Path”的条目:
• • 若是该条目存在, 追加 flutter\bin的全路径，使用 ; 做为分隔符.
• • 若是条目不存在, 建立一个新用户变量 Path ，而后将 flutter\bin的全路径做为它的值.
• 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，若是没有，也能够添加它们。

为了测试flutter环境变量是否配置成功，在终端中输入flutter命令并回车，若是出现flutter命令相关用法提示，则表示flutter环境变量配置成功，以下图所示：

运行 flutter doctor

切换到flutterSDK所在路径下检测 当前flutter须要的依赖并下载依赖

C:\Users\XX\flutter\bin> flutter doctor
复制代码

第一次运行一个flutter命令（如flutter doctor）时，它会下载它本身的依赖项并自行编译。之后再运行就会快得多。

运行后出现下图是提示一些Android许可不被接受,要解决这个问题,运行:flutter doctor——android license便可

配置编辑器

Android Studio 安装

Android Studio: 为Flutter提供完整的IDE体验

• 请安装Android Studio3.0或更高版本.

IntellJ IDE 安装

• IntelliJ IDEA Community, version 2017.1或更高版本.
• IntelliJ IDEA Ultimate, version 2017.1或更高版本.

安装Flutter和Dart插件

• Flutter 插件： 支持Flutter开发工做流 (运行、调试、热重载等).
• Dart 插件： 提供代码分析 (输入代码时进行验证、代码补全等).

Android studio :打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux), 选择 Browse repositories…, 选择 Flutter/Dart 插件并点击 install.重启Android Studio后插件生效.

IntellJ IDEA : IntelliJ IDE>setting>Plugins

建立新应用

Android studio 重启后打开 选择 File>New Flutter Project

接下来next 包名,sdk地址很少作解释,最后finish,等待Android studio建立项目.

运行应用程序

• 定位到Android Studio 工具栏:

  

• 在 target selector 中, 选择一个运行该应用的Android设备. 若是没有列出可用，请选择 Tools>Android>AVD Manager 并在那里建立一个
• 在工具栏中点击 Run图标
• 若是一切正常运行结果以下图