Day01-Flutter最新的安装与使用

一、Flutter官网 简介，Flutter中文网

• 1.1、 2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架，点击查看Flutter介绍视频。

• 1.2、Flutter的特点

• Google公司在国内做过很多宣讲，其中多次提到Flutter的几个特点：美观、快速、高效、开放。
• 美观：使用Flutter内置美丽的Material Design和Cupertino widget（什么是widget，不着急）、丰富的motion API、平滑而自然的
  滑动效果和平台感知，为您的用户带来全新体验。
• 快速：

• Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用
  Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
• Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库。

• 高效：Hot Reload (热重载) ，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的
• 开放：Flutter 是开放的，它是一个完全开源的项目。

• 1.3、总体架构

1.4、GPU渲染

• 直接看这幅图很难理解两个GPU的作用：

• GPU将信号同步到 UI 线程
• UI 线程用Dart来构建图层树
• 图层树在GPU 线程进行合成
• 合成后的视图数据提供给Skia 引擎
• Skia 引擎通过OpenGL 或者 Vulkan将显示内容提供给GPU

• 这也是flutter区别于React Native的本质区别：

• React Native 之类的框架，只是通过 JavaScript 虚拟机扩 展调用系统组件，由 Android 和 iOS 系统进行组件的渲染；
• Flutter 是自己完成了组件渲染的闭环

• 渲染引擎skia

• Skia就是 Flutter向 GPU提供数据的途径。

• Skia（全称Skia Graphics Library（SGL））是一个由C++编写的开源图形库
• 能在低端设备如手机上呈现高质量的2D图形，最初由Skia公司开发，后被Google收购
• 应用于Android、Google Chrome、Chrome OS等等当中。

• 目前，Skia 已然是 Android 官方的图像渲染引擎了，因此 Flutter Android SDK 无需内嵌 Skia 引擎就可以获得天然的 Skia 支持；
• 而对于 iOS 平台来说，由于 Skia 是跨平台的，因此它作为 Flutter iOS 渲染引 擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text，这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的原因。
• 底层渲染能力统一了，上层开发接口和功能体验也就随即统一了，开发者再也不 用操心平台相关的渲染特性了。也就是说，Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。

二、Flutter SDK 的安装

• 2.1、下载相应系统的 sdk，在此我选择的是 Mac系统

2.2、下载完 Flutter SDK 后，解压下载包(解压后是一个flutter 文件),把 flutter 文件 拖入到 /Applications下

2.3、终端进行配置 flutter

• 配置路径：终端输入：vim ~/.bash_profile,把下面代码复制进去

export FLUTTER_HOME=/Applications/flutter
export PATH=$FLUTTER_HOME/bin:$PATH
export PATH=$FLUTTER_HOME/bin/cache/dart-sdk/bin:$PATH

• 然后执行：source ~/.bash_profile

source ~/.bash_profile

• 配置镜像，flutter项目会依赖一些东西，在国内下载这些依赖会有一些慢，所以我们可以将它们的安装源换成国内的（也就是设置国内的镜 像）

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 2.4、测试flutter 是否安装成功： 终端运行：flutter --help，出现下面的效果，表明安装成功

提示：如果报错 zsh: command not found: flutter

• 据官方说，从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell。运行chsh -s /bin/zsh之后，发现flutter的命令不能用了，这是因为切换了shell执行工具
• 解决方法：复制一份.bash_profile，然后改名为.zprofile，终端执行source ~./zprofile

source ~/.zprofile

• 2.5、查看是否需要安装任何依赖项来完成设置

flutter doctor

提示：有报红的一个一个的解决

• 问题一：  Android license status unknown

解决办法： 打开上面的 链接，如下：偏好设置->Android SDK->SDK Tools -> 取消选中 Hide Obsolete Packages -> 选中 AndroidSDKTools(Obsolete)

都没问题的如下：

三、Android 开发环境的配置

• 3.1、下载 android studio,下载完安装到电脑即可，个人建议在社区进行 Android Studio 下载，因为在官网下载的我安装的时候遇到很多奇奇怪怪的事情，最后再社区下载的就没有任何问题
  

安装的过程可能会报错: 最好配置下

3.2、下载 Java SDK 安装包，其实这个不需要单独下载，在安装 Android Studio的时候会提示去下载

3.3.在 Android Studio 里面安装 Flutter 和 dart, 在Android Studio 的设置(commond+,快速打开Android Studio的设置界面)里面，选择 Plugins,搜索 flutter

3.4、安装好后再打开 Android Studio 如下

四、iOS 环境的配置

• 4.1、在 App Store 下载一个 Xcode 即可

• 4.2、查看项目运行直接在 Xcode 的模拟器上即可

五、创建一个 Flutter 项目

• 5.1、使用 Android Studio 创建一个项目
  

提示：推荐使用终端创建项目： flutter create 项目的名字

• Flutter Application：我们要创建的应用
• Flutter Plugin  插件： 做一些iOS或者Android原生的支持
• Flutter Package 包：是一些lip库
• Flutter Module： 组件

• 5.2、使用模拟器展示 Hello World ,复制官网给的代码到main.dart
  

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
       title: 'Welcome to Flutter',
       home: Scaffold(
          appBar: AppBar(
             title: Text('Welcome to Flutter'),
          ),
          body: Center(
             child: Text('Hello World'),
         ),
       ),
    );
  }
}

在安装的过程中，你可能会遇到很多的问题，解决不了的都可以联系我，方式你总会找到的😆

最后推荐一篇Flutter的文章：你好，Flutter