**# 前言

截至目前，字节跳动有很多业务落地了 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{@overrideWidgetbuild(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.0english_words:^3.1.0

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

flutter packages getRunning "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 更重要的是须要晋升工程化能力以及生态圈的建设，能力吸引更多的开发者退出。

**