关于android:双倍NB字节跳动资深研发花7天肝出的这份286页Flutter技术进阶

**# 前言

截至目前，字节跳动有很多业务落地了 Flutter 技术计划，包含今日头条、西瓜视频、皮皮虾等 20 多个业务在应用 Flutter 开发，有纯 Flutter 工程，也有 Flutter 与 Native 的混合工程。

字节跳动抉择 Flutter 的初心

与其说 Flutter 是大前端技术，不如说是大挪动端技术。Flutter 倒退的 Roadmap 也是先全面反对 Android/iOS 端能力，再进一步欠缺 Web 端能力反对的。

字节跳动对于客户端技术还是非常重视的，字节跳动有很多客户端工程师，之前客户端深刻点的根底技术更多是搞插件化、热修复、性能优化、平安加固等，跨平台方向始终都是前端工程师在不遗余力地推动，属于大前端方向。而 Flutter 是客户端更有主导的跨平台技术计划。

在字节跳动，跨平台技术并没有造成大规模的落地，也没有历史包袱，所以在面对跨平台技术选型的时候，更关注跨平台技术的技术下限以及发展潜力，自渲染技术的 Flutter 能够了解为更彻底更纯正的跨平台技术，随同着媲美原生的晦涩度，这便是咱们抉择 Flutter 的初心。

当初越来越多的业务和团队开始尝试 Flutter 技术栈，作为一名开发人员，把握 Flutter 的应用是十分有必要的，特地是像阿里、腾讯等公司都应用宽泛，那么如何可能达到“精通”Flutter 的水平？明天就来好好谈谈。

简略介绍一下这份 Flutter 技术进阶笔记，每个章节都是深刻解析了源码底层在 PDF 里边有。为了让大家更好的学习 Flutter 技术，我也是第一工夫展现给大家了！

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

第一章 为什么 Flutter 是跨平台开发的终极之选

跨平台开发是当下最受欢迎、利用最宽泛的框架之一。能实现跨平台开发的框架也形形色色，让人目迷五色。

最风行的跨平台框架有 Xamarin、PhoneGap、Ionic、Titanium、Monaca、Sencha、jQuery Mobile、React native、Flutter 等等。但这些工具的体现也是高下有别，各有千秋。

在这些风行的框架中，有很多也曾经隐没在了历史的长河中被人慢慢忘记了。但 React native 和 Flutter 这俩框架位置仍旧坚挺，备受欢送。

因为它们俩别离由最弱小的科技巨头 Facebook 和谷歌背书反对。

第二章 在 Windows 上搭建 Flutter 开发环境

• 应用镜像
• 零碎要求
• 获取 Flutter SDK
• 编辑器设置
• Android 设置
• 起步: 配置编辑器
• 起步: 体验
• 体验热重载

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

第三章 编写您的第一个 Flutter App

第 1 步: 创立 Flutter app

创立一个简略的、基于模板的 Flutter 应用程序，依照[创立您的第一个 Flutter 利用中的指南的步骤，而后将我的项目命名为 startup_namer（而不是 myapp)，接下来你将会批改这个利用来实现最终的 APP。

在这个示例中，你将次要编辑 Dart 代码所在的lib/main.dart 文件,

提醒: 将代码粘贴到利用中时，缩进可能会变形。您能够应用 Flutter 工具主动修复此问题:

Android Studio / IntelliJ IDEA: 右键单击 Dart 代码，而后抉择Reformat Code with dartfmt.

VS Code: 右键单击并抉择Format Document.

Terminal: 运行 flutter format <filename>.

1. 替换 lib/main.dart. 删除 lib / main.dart 中的所有代码，而后替换为上面的代码，它将在屏幕的核心显示“Hello World”.

import'package:flutter/material.dart';
voidmain()=>runApp(newMyApp());
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnnewMaterialApp(
title:'Welcome to Flutter',
home:newScaffold(
appBar:newAppBar(title:newText('Welcome to Flutter'),
),
body:newCenter(child:newText('Hello World'),
),
),
);
}}

2. 运行应用程序，你应该看到如下界面.

剖析

本示例创立一个 Material APP。Material 是一种规范的挪动端和 web 端的视觉设计语言。Flutter 提供了一套丰盛的 Material widgets。

main 函数应用了 (=>) 符号, 这是 Dart 中单行函数或办法的简写。

该应用程序继承了 StatelessWidget，这将会使利用自身也成为一个 widget。在 Flutter 中，大多数货色都是 widget，包含对齐 (alignment)、填充(padding) 和布局(layout)

Scaffold 是 Material library 中提供的一个 widget, 它提供了默认的导航栏、题目和蕴含主屏幕 widget 树的 body 属性。widget 树能够很简单。

widget 的次要工作是提供一个 build()办法来形容如何依据其余较低级别的 widget 来显示本人。

本示例中的 body 的 widget 树中蕴含了一个 Center widget, Center widget 又蕴含一个 Text 子 widget。Center widget 能够将其子 widget 树对其到屏幕核心。

第 2 步: 应用内部包(package)

在这一步中，您将开始应用一个名为 english_words 的开源软件包，其中蕴含数千个最罕用的英文单词以及一些实用功能.

您能够 在 pub.dartlang.org 上找到 english_words 软件包以及其余许多开源软件包

1.pubspec 文件治理 Flutter 应用程序的 assets(资源，如图片、package 等)。在 pubspec.yaml 中，将 english_words（3.1.0 或更高版本）增加到依赖项列表，如上面高亮显示的行：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons:^0.1.0
english_words:^3.1.0

2. 在 Android Studio 的编辑器视图中查看 pubspec 时，单击右上角的 Packages get，这会将依赖包装置到您的我的项目。您能够在控制台中看到以下内容：

flutter packages get
Running "flutter packages get"in startup_namer...
Process finished with exit code 0

3. 在 lib/main.dart 中, 引入 english_words, 如高亮显示的行所示:

import'package:flutter/material.dart';import'package:english_words/english_words.dart';

在您输出时，Android Studio 会为您提供无关库导入的倡议。而后它将出现灰色的导入字符串，让您晓得导入的库尚未应用（到目前为止）

4. 应用 English words 包生成文原本替换字符串“Hello World”.

Tip:“驼峰命名法”(称为“upper camel case”或“Pascal case”), 示意字符串中的每个单词（包含第一个单词）都以大写字母结尾。所以，“uppercamelcase”变成“UpperCamelCase”
进行以下更改, 如高亮局部所示:

import'package:flutter/material.dart';import'package:english_words/english_words.dart';
voidmain()=>runApp(newMyApp());
classMyAppextendsStatelessWidget{
@override
  Widget build(BuildContext context){final wordPair =new WordPair.random();
returnnewMaterialApp(
      title:'Welcome to Flutter',
      home:newScaffold(
        appBar:newAppBar(title:newText('Welcome to Flutter'),
),
        body:newCenter(//child: new Text('Hello World'),
          child:newText(wordPair.asPascalCase),
),
),
);
}}

5. 如果应用程序正在运行，请应用热重载按钮新正在运行的应用程序。每次单击热重载或保留我的项目时，都会在正在运行的应用程序中随机抉择不同的单词对。这是因为单词对是在 build 办法外部生成的。每次 MaterialApp 须要渲染时或者在 Flutter Inspector 中切换平台时 build 都会运行.

遇到问题?

如果您的利用程序运行不失常，请查找是否有拼写错误。如果须要，应用上面链接中的代码来比照更正。

· pubspec.yaml (The pubspec.yaml file won’t change again.)

· lib/main.dart

第 3 步: 增加一个有状态的部件（Stateful widget）

第 4 步: 创立一个有限滚动 ListView

第 5 步: 增加交互

第 6 步: 导航到新页面

第 7 步：应用主题更改 UI

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

第四章 Flutter 开发环境搭建和调试

• 模拟器的装置与调试
• 开发环境的搭建

第五章 Dart 语法篇之根底语法(一）

1.Hello Dart
2. 数据类型
3. 变量和常量
4. 汇合(List、Set、Map)
5. 流程管制
6. 运算符
7. 函数

第六章 Dart 语法篇之汇合的应用与源码解析(二)

1.List
2.Set
3.Map
4.Queue
5.LinkedList
6.HashMap
7.Map、HashMap、LinkedHashMap、SplayTreeMap 区别
8. 命名构造函数 from 和 of 的区别以及应用倡议

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

第七章 Dart 语法篇之汇合操作符函数与源码剖析(三)

这一节的内容更实用，相对能够进步你的 Flutter 开发效率的函数，那就是汇合中罕用的操作符函数。这次说的内容的比较简单就是怎么用，以及源码外部是怎么实现的。

1.Iterable<E>
2.forEach 应用形式及源码剖析
3.map 应用形式及源码剖析
4.any 应用形式及源码剖析
5.every 应用形式及源码剖析
6.where 应用形式及源码剖析
……

第八章 Dart 语法篇之函数的应用(四)

1. 函数参数
2. 匿名函数(闭包，lambda)
3. 箭头函数
4. 部分函数
5. 顶层函数和动态函数
6.main 函数
7.Function 函数对象

第九章 Dart 语法篇之面向对象根底(五)

1. 属性拜访器 (accessor) 函数 setter 和 getter
2. 面向对象中的变量
3. 构造函数
4. 形象办法、抽象类和接口
5. 类函数

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

第十章 Dart 语法篇之面向对象继承和 Mixins(六)

本章咱们持续摸索 Dart 中面向对象的重点和难点 (继承和 mixins)。mixins(混合) 个性是很多语言中都是没有的。

本篇次要波及到 Dart 中的一般继承、mixins 多继承的模式(实际上实质并不是真正意义的多继承)、mixins 线性化剖析、mixins 类型、mixins 应用场景等。

第十一章 Dart 语法篇之类型零碎与泛型(七)

1. 可选类型
2. 接口类型
3. 泛型
4. 类型具体化

第十二章 Flutter 中的 widget

1.Flutter 页面 - 根底 Widget
2.Widget
3.StatelessWidget
4.State 生命周期
5. 根底 widget

笔记内容全副收费分享，有须要完整版笔记的小伙伴【点击我】收费获取哦！

最初

在现阶段，开始尝试摸索和积攒积淀 Flutter 技术能力，并在业务上应用 Flutter 技术的利用，从策略上来将曾经处于当先。

抉择 Flutter，正堪称是“进可攻退可守”，往前进一步，Flutter 利用将来可无缝迁徙到 Fuchsia 零碎，借用 Fuchsia 零碎的能量扩大到更宽泛的用户场景；退一步，Flutter 技术本身在 Android/iOS 平台的体现相比其余跨平台技术曾经是很优良。

技术在一直演变中螺旋后退，平台本身也随之演进，将来 Flutter 会朝着多端一体化的方向倒退，能反对更多的端（包含平板、笔记本、智能设施等）。

作为一套跨平台的 UI 框架，Flutter 采纳自渲染的技术计划，是一个下限很高的跨平台技术，但 Flutter 更重要的是须要晋升工程化能力以及生态圈的建设，能力吸引更多的开发者退出。

**