Android开发者的Flutter入门学习

序言

Flutter 出来已经有些日子了，愈来愈多的开发者也开始尝试使用 Flutter 进行开发，Flutter 是谷歌的移动UI框架，基于 Dart 语言，支持多端开发（Android、iOS、Web），听到这里是否是想要跃跃欲试了，因为LZ也正在踩坑的路上，因此有写的不对的地方还请多多指教。

官网

任何一门语言，官网都是最好的学习渠道，虽说大多数都是英文的，但如今谷歌已经有不少都支持中文版本了：

Flutter 中文官网

安装

安装直接按照官网的来就好了，最主要的就是配置一下环境变量，下载下来的 flutter 包你能够理解为 java 中的 jar 包，开发的时候须要导入的。

特性

一、widget（至关于Android中的View）

咱们都知道，在 Android 中页面是由不少个View来构成的，在 Flutter 中，Widget 用来构成页面上的内容，可是和 View 不一样的是，Widget 是不可变的，有些人可能就有疑问了，不可变那岂不是静态页面，非也非也，那确定有其余办法的咯，接着往下看：

1.一、不可变状态的小部件StatelessWidget

你能够将 StatelessWidget 理解成 Android 中的 ViewGroup，这是一个无状态的小部件，什么意思呢，就是当你的页面部分不依赖于对象配置信息外的其余任何内容时，简而言之就是你的页面是静态页面时，就可使用它。

1.二、可变状态的小部件StatefulWidget

和 StatelessWidget 同样能够理解为 ViewGroup，可是它是有状态的，这个状态相似于 Activity 的生命周期，当你的页面须要动态的改变时，你就须要使用它。

注意

若是一个 Widget 发生了变化（用户与之交互），那么它就是有状态的；若是一个子 Widget 是有状态的，那么包裹它的父 Widget 能够是有状态的也能够是无状态的，简而言之，StatelessWidget 中能够包含 StatefulWidget，而 StatefulWidget 中也能够包含 StatelessWidget。

二、Android中的四大组件还有与之对应的吗

除了页面以外，其余的确定都没有，由于毕竟是跨端开发的框架，不是专门为 Android 而设计的，可能有些人要问了，那若是想实现 Android 中的一些特殊的功能岂不是作不了了，非也非也，这个就属于另一个知识了，卖个关子先，接着往下看；Activity 和 Fragment 在 Flutter 中都变成了 Widget。

三、资源文件

3.一、资源图片

在Android中资源图片有不少种分辨率，Flutter 遵循像iOS这样简单的3种分辨率格式: 1x, 2x, and 3x，在根目录下建立一个 images 的文件夹，而后再在 images 文件夹中建立三个文件夹用来存放不一样分辨率的图片：

• ../icon.png
• ../2.0x/icon.png
• ../3.0x/icon.png

而后，你须要在 pubspec.yaml 中配置这些图片，这个文件至关于Android中的 gradle文件。

3.二、字符串

在 Flutter 中，目前最好的作法就是新建一个类，用来声明你所须要的字符串

声明：
class Strings{
  static String welcomeMessage = "Welcome To Flutter";
}

使用：
new Text(Strings.welcomeMessage);
复制代码

四、生命周期

在 Flutter 中，StatelessWidget 是没有生命周期的，只有 StatefulWidget 才有，咱们通常经过挂接到WidgetsBinding观察并监听didChangeAppLifecycleState更改事件来监听生命周期事件，有如下这些生命周期：

• resumed - 应用程序可见并响应用户输入。这是来自Android的onResume
• inactive - 应用程序处于非活动状态，而且未接收用户输入。此事件在Android上未使用，仅适用于iOS
• paused - 应用程序当前对用户不可见，不响应用户输入，并在后台运行。这是来自Android的onPause
• suspending - 该应用程序将暂时停止。这在iOS上未使用

五、异步UI

Dart是单线程执行模型，支持Isolates（在另外一个线程上运行Dart代码的方式）、事件循环和异步编程。 除非您启动一个Isolate，不然您的Dart代码将在主UI线程中运行，并由事件循环驱动。

当你进行网络请求时，能够在UI线程直接运行网络请求代码：

loadData() async {
  String dataURL = "https://jsonplaceholder.typicode.com/posts";
  http.Response response = await http.get(dataURL);
  setState(() {
    widgets = JSON.decode(response.body);
  });
}
复制代码

这里使用了 async/await 语法来调用API，你能够理解为，使用 async 以后这个方法就变成了异步的方法，而后须要等待（await）网络请求完成以后再执行下面更新语句；在 StatefulWidget 中，咱们使用 setState 方法来更新UI操做，这会从新执行 build 方法。

六、组件

在 Flutter 中，有不少组件，他们能够构建成页面，由于组件繁多，因此这里我就不一一介绍了，我会在接下来的博客中为你们一一介绍 Flutter 中各类组件的使用方法，也欢迎你们持续关注后续博客。

• 6.一、Flutter组件学习（一）—— Text组件

最后

提醒一下你们，若是开发过程当中有大的修改时，仍是不要相信 Flutter 的热重载，在看到运行状况与实际不符时，卸载重装再来一遍。最后的最后，上一张LZ花了一天半时间入门的Demo：

地址：Flutter解析Demo

公众号

欢迎关注个人我的公众号【IT先森养成记】，专一大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能获得的不止是技术上的提高，还有一些学习经验以及志同道合的朋友，赶快加入咱们，一块儿学习，一块儿进化吧！！！