Flutter学习笔记01

[TOC]

1. 跨平台技术的发展历史

1.1 跨平台技术

跨平台技术是软件工程发展到一定阶段的产物，即一个操作系统下开发的应用，放到另一个操作系统下依然可以运行，即不依赖于操作系统，也不依赖硬件环境。典型的跨平台编程语言有java和python，它们依赖于底层的虚拟机（或解释器）得以在多种系统下开发，运行和维护。

尽管java和python语言编写的前端UI应用程序一般也能跨平台运行，但它们更多地被用于后端业务软件系统开发的应用场景。随着移动互联网大潮的兴起，ios、android等移动操作系统在移动客户端被大量使用，2013年移动设备的装机量首次超越PC，行业需求催生了跨平台前端技术的发展。

1.2 跨平台前端框架

目前，前端狂平台框架分为两类，一类是以WebApp框架，另一类是移动App框架。

目前主流的WebApp框架包括Cordova、Inonic、Dcloud、小程序等几种，移动App由Facebook公司推出的React native、阿里推出的Weex以及本文要重点介绍的谷歌公司推出的Flutter。

2.FLutter简介

在 2017年的谷歌 I/O大会上，Google推出了Flutter —— 一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布了 Flutter的第一个Beta版本，2018年5月的 I/O大会上更新到了Beta3版本，向正式版又迈进了一步。一时间业内对这个框架的关注度越来越高。

Flutter可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia 应用的主要方式。

Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

3.Windows系统下Flutter开发环境的安装部署

3.1 下载Flutter SDK

1. 在Flutter官网下载最新可用的安装包，有Beta、Dev和Master几个版本可以选择，一般Beta是比较稳定的版本，这里选择Beta版本。

1541216591797.png

2. 将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。
3. 在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

3.2更新环境变量

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

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

重启Windows以应用此更改。

1541217219951.png

3.3 运行 flutter doctor

• 打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：

1541224320721.png

3.4 安装Flutter、Dart插件

3.4.1 Android Studio 安装

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

1. 安装Android Studio

• Android Studio, 3.0或更高版本.

或者，您也可以使用IntelliJ：

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

3.4.2 安装Flutter和Dart插件

需要安装两个插件:

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

要安装这些:

1. 启动Android Studio.

2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.

4. 重启Android Studio后插件生效.

1541225383155.png 1541225697811.png

4. 第一个Flutter应用

1. 打开idea新建一个工程，选择Flutter,点击Next

   
   [图片上传中...(1541226214925.png-d7e2c9-1541238672272-0)]

2. 点击Finish

   
   1541226214925.png

3. 修改\flutter\packages\flutter_tools\gradle\flutter.gradle

1541238006495.png

4. 编译运行

1541238183265.png