Flutter基础（二）Flutter最新开发环境搭建和Hello World

本文首发于微信公众号「刘望舒」

前言

最近的Google I/O大会上，Flutter1.5 开始支持移动、Web、桌面和嵌入式设备，从不温不火的sky一直进化到现在热门的Flutter，Flutter的发展已经超出不少人的想象。我对跨平台技术一直不感冒，虽然也学了一些，但更可能是为了工做而不是出于兴趣，由于我认为它们都是过分产物，不会掀起多大的风浪，可是Flutter多是个例外，关于Flutter的好处网上有不少，这里就很少说了，也不想吹嘘这门技术，只是想说如今是时候了解Flutter了。

一开始没想写Flutter的相关文章的，由于这些看官方文档就够了，可是有很多同窗就想看我写的，所以我也写个Flutter系列。这个Flutter基础系列是Flutter系列的入门系列，后面还会有其余的Flutter系列。既然要学习Flutter确定要先学习环境的搭建，能够在Windows、MAC、Linux上来进行Flutter开发，因为本系列文章是面向Android开发来编写的，所以选择大部分人的都有的Windows平台。

本篇文章的目录为：

1. Flutter概述
2. Flutter开发环境搭建
3. 运行一个Flutter Demo
4. Hello World

1.Flutter概述

Flutter是谷歌的移动UI框架，能够快速在Android和iOS上构建高质量的原生用户界面， 它的前身是谷歌试验项目Sky。主要有如下几个特色：
符合各个平台的用户体验
Flutter内置了Material Design和Cupertino风格（iOS风格）的Widgets，使得咱们能够开发出符合Android和iOS风格的应用，另外Flutter提供了丰富的motion API、平滑而天然的滑动效果和平台感知，为用户带来全新体验。

响应式框架
使用Flutter的响应式框架和一系列基础widget，能够轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）能够帮助开发者解决艰难的UI挑战。

跨平台自绘引擎
Flutter与Hybrid App、React Native这些跨平台技术不一样，Flutter既没用使用WebView，也没有使用各个平台的原生控件，而是自己实现一个统一接口的渲染引擎来绘制UI，这样作能够保证不一样平台UI的一致性。另外采用自绘引擎后，Flutter在布局过程当中不须要像RN那样要在JavaScript和Native之间通讯，能够节省性能开销。Flutter使用Skia做为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了很是友好的API。 关于Flutter与其余跨平台技术的区别能够查看移动开发的跨平台技术演进这篇文章。
采用Dart开发
Flutter App采用Dart语言来开发。与JavaScript相比，Dart在 JIT（即时编译）模式下，速度与 JavaScript基本持平。可是当Dart以 AOT模式运行时，Dart性能要高于JavaScript。

访问本地功能和SDK并支持插件
Flutter能够复用Java、Swift或ObjC代码，访问Android和iOS上的原生系统功能。另外经过Flutter插件也能够访问原生系统功能，好比蓝牙、相机、WiFi等等。

2.Flutter开发环境搭建

在Windows平台开发的话，官方的环境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬盘空间，若是是在Mac和Linux上搭建开发环境请查看官方文档。

2.1 安装Git for Windows和PowerShell 5.0

Git for Windows下载地址为：git-scm.com/download/wi… + R 输入cmd，在cmd中输入git 命令来验证下，好比git --version。 PowerShell是微软推出的代替cmd的更方便的命令行工具，win七、win八、win10系统都自带有这个命令行工具。右键点击WIn10的开始按钮搜索PowerShell，若是没有，去powershell官网下载PowerShell，地址为：docs.microsoft.com/zh-cn/power…

2.2 下载Flutter SDK

下载Flutter SDK有多种方法，看看哪一种更适合本身：

1. flutter官网下载最新Beta版本的进行安装：flutter.dev/docs/develo…
2. Flutter github项目中去下载，地址为：github.com/flutter/flu…
3. 经过 git 命令来下载 Flutter 的 beta 版：

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

这里下载最新的Beta版本就能够了。

将下载下来的zip安装包解压到你想安装Flutter SDK的路径，好比：F:\Flutter。须要注意的是，不要将flutter安装到须要一些高权限的路径，好比C:\Program Files\。

2.3 配置环境变量

配置 flutter 环境变量 若是想在命令行中使用 flutter 命令，须要添加flutter的路径到系统变量path中。 个人flutter路径为F:\Flutter\flutter，那么就将F:\Flutter\flutter\bin放到系统变量path中。

在cmd中输入flutter --version来验证是否配置成功。

配置国内镜像

若是在国内安装或使用Flutter，使用Flutter的官方镜像或者其余镜像可以免于限制而且加快速度，Flutter的官方镜像为

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

这两个镜像是会变的，具体能够查看官方说明：flutter.dev/community/c… 除此以外还有上海交通大学 Linux 用户组：

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
复制代码

这里使用Flutter的官方镜像，将这两个url配置到用户环境变量中：

2.4 安装和检查各类依赖项

打开cmd输入以下命令：

flutter doctor
复制代码

这时会打印一些提示信息：

能够看到有五个类别的依赖项，若是安装的IDE不一样，类别内容也会不一样。其中√是没有问题的类别，！指的是有问题的类别。

1. Flutter的版本和运行环境
2. Android的工具链的状况
3. Android Studio的版本，以及Flutter插件安装状况
4. IntelliJ IDEA Community的版本，以及Flutter插件安装状况
5. 设备的链接状况

安装任何缺乏的依赖项后，能够再次运行flutter doctor命令来验证是否已正确设置全部内容。好比第二项有问题，上面提示能够运行flutter doctor --android-licenses来解决，照作后，再次运行flutter doctor命令，打印的提示信息会变为：

2.5 设置编辑器

安装Android Studio或者 IntelliJ IDEA 安装Android Studio的过程我就很少说了，须要安装3.0 或者更高的版本。没有下载的去这里下载：developer.android.google.cn/studio/

除了Android Studio还可使用IntelliJ IDEA： IntelliJ IDEA Community, 2017.1版本或更高版本 IntelliJ IDEA Ultimate, 2017.1版本或更高版本 下载地址为：www.jetbrains.com/idea/downlo…

安装Flutter和Dart插件 Android Studio的File --> settings --> Plugins --> Browse repositories，在搜索框输入Flutter和Dart来安装它们。

安装成功后重启Android Studio。这时cmd输入flutter doctor命令，就会看到提示信息的Android Studio的版本依赖项为√。

2.6 设置Android设备和模拟器

设置Android设备和开发Android同样，须要注意的的是，这个设备的应该为Android 4.1（API级别16）或更高版本。 模拟器选择Android Studio和Genymotion建立的均可以，推荐使用x86或者x86_64镜像。 至于怎么链接设备和建立模拟器就不讲了，不是本文的重点。

3.运行一个Flutter Demo

Android Studio菜单栏的File --> New Flutter Project，选择Flutter application：

Project name须要小写，接着设置Flutter SDK的位置和项目的位置，若是没有下载Flutter SDK，能够点击install SDK下载，以下图所示。

项目建立完成后，在Android Studio顶部的工具栏中的目标选择器里选择要运行的设备或者模拟器，我这里选择的是Genymotion建立的Custom Phone(Android 9.0)。

单击工具栏中的运行图标，或调用菜单项的Run -->Run ‘main.dart’ 运行Flutter Demo，效果以下图所示。

热重载 Flutter提供了快速开发周期和热重载，可以从新加载一个实时运行的应用程序的代码，而无需从新启动或丢失应用程序状态，咱们来作个实验。 打开lib/main.dart，将字符串You have pushed the button this many times，改成You have clicked the button this many times。 而后Save All或者点击工具栏中的黄色闪电图标，就能够发现字符串更新了咱们修改的值。

4.Hello World

将lib/main.dart中的全部代码替换为以下内容：

import 'package:flutter/material.dart';//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(//4
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
复制代码

这时Flutter的Hello World就大功告成了。下面对代码进行简单的讲解：

1. 注释1处用来引入 Material Design设计风格的基础包，每个dart文件几乎都会引入它，Flutter中提供了丰富的Material widgets。
2. 注释2处的main方法是Dart程序的入口，使用了=>符号，这是Dart中单行函数或方法的简写，等价于以下代码：

void main(){
return runApp(Widget app);
}
复制代码

runApp方法是Flutter框架的入口，若是不返回runApp方法，那么执行的是一个Dart控制台应用。 3. 注释3处说明MyApp继承了 StatelessWidget，这会使应用自己也成为一个widget。Flutter中有一切皆widget的概念，widget分为StatelessWidget（无状态widget）和StatefulWidget（有状态widget）。 4. build方法用来描述如何用其余较低级别的widget来显示自身。 5. MaterialApp包含了App实现Material Design所须要的一些widget，其中title为在任务管理窗口中所显示的应用名字，home为应用默认显示的界面widget。 6. Scaffold是Material Design布局结构的基本实现，Scaffold内部包含了appBar和body，appBar为应用程序栏，它在Scaffold的顶部；body为Scaffold的主要内容，通俗来说就是屏幕的大部分。注释4处，body包含了一个Center widget，Center widget中有一个子widget Text，这样字符Hello World就会显示在body的中心。

Flutter基础系列
Flutter基础（一）移动开发的跨平台技术演进
Flutter基础（二）Flutter开发环境搭建和Hello World
Flutter基础（三）Dart快速入门
Flutter基础（四）开发Flutter应用前须要掌握的Basic Widget
Flutter基础（五）Material组件之MaterialApp、Scaffold、AppBar
Flutter基础（六）Material组件之BottomNavigationBar、TabBar、Drawer
Flutter基础（七）Scrolling Widget之ListView、GridView、PageView
Flutter基础（八）手势相关Widget：GestureDetector和Dismissible
Flutter基础（九）资源和图片
Flutter基础（十）布局Widget快速入门
Flutter基础（十一）网络请求（Dio）与JSON数据解析
Flutter基础（十二）路由（页面跳转）与数据传递
Flutter基础（十三）Flutter与Android的相互通讯

---

这里不只分享大前端、Android、Java等技术，还有程序员成长类文章。