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、总体架构

Flutter 总体架构
1.4、GPU渲染

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系统

选择的是对应的系统

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

把 `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)
都没问题的如下：

Flutter环境配置好的展示

三、Android 开发环境的配置

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

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

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

选择下载适合自己系统的 sdk

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

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

四、iOS 环境的配置

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

App Store

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

五、创建一个 Flutter 项目

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

使用 `Android Studio` 创建一个项目
- 提示：推荐使用终端创建项目： flutter create 项目的名字
创建一个Flutter项目
- 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