Flutter一：Flutter简介、环境配置

以项目驱动，中间穿插各个组件

• 第一天：
  Flutter简介、环境搭建、Dart语法基础一
• 第二天：
  Dart语法基础二
  FLutter项目框架搭建，侧滑"
• 第三天：
  Flutter项目搭建之底部导航，首页轮播
• 第四天：
  Flutter项目首页：列表、多布局
• 第五天：
  Flutter项目广场：列表展示网络数据、复杂布局
• 第六天：
  FLutter项目公众号一：主要本地数据实现TabBar切换
• 第七天：
  FLutter项目公众号二：网络获取公众号数据，使用TabBar实现切换、Widget复用
• 第八天：
  Flutter项目体系一：完成体系功能，实现页面跳转、传值、webview展示详情页
• 第九天：
  Flutter项目体系二：实现体系模块的粘性头布局、实现流式布局
• 第十天：
  Flutter项目导航页、欢迎页实现

一. Flutter简介

1. 官方解释
   Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。
2. 我的解读：
   ①跨平台：Linux、Android、IOS、Fuchsia、web
   ②原生用户界面：他是原生的，体验更好，性能更好
   ③60fps超高性能：Flutter采用的是GPU渲染技术，性能极高。
   ④开源免费：完全开源，可以商用
3. Flutter与主流框架对比
   ①Cordova：混合开发框架（Hybird App）：基于网页技术进行包装，利用插件的形式开发移动应用的，无论是性能还是体验，Flutter都可以完胜了。
   ②ReactNative：将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。
   ③Flutter：原生开发，在渲染技术上选自己的实现（GDI）

4. Flutter分层的框架

   
   image.png
   

   FrameWork：使用dart编写，提供各种基础组件库，包括Widget和动画等
   Engin：skia是Google渲染引擎，android中也是用的这个库，比如画布、画笔等都是这个库里的。

二. Windows环境配置

1. flutter官网下载SDK
   注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包 。
   

   image.png

2. 在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

3. 配置环境变量：flutter/bin配置到path 中，配置是否成功：flutter doctor

4. Android studio下载插件：flutter，下载成功后重启软件即可使用

5. 配置dart和flutter SDK路径

image.png image.png

6. 使用镜像
   由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

7. 常用命令
   ①flutter插件升级命令： flutter upgrade
   ⑤flutter查看SDK分支：flutter channel

三、学习资料

1. 官网