去年，2019 年无疑是 Flutter 技术热火朝天倒退的一年。
每一个挪动开发者都在为 Flutter 带来的“疾速开发、富裕表现力和灵便的 UI、原生性能”的特色和理念而痴狂，从超级 App 到独立利用，从纯 Flutter 到混合栈，开发者们在不同的场景下乐此不疲的摸索和利用着 Flutter 技术，也在面临着各种各样不同的挑战。
Alibaba团体内也有越来越多的业务和团队开始尝试 Flutter 技术栈，从闲鱼的一支独秀引领潮流，到现在淘宝特价版、盒马、优酷、飞猪等BU业务相继入局，Flutter的业务利用在团体内也曾经逐步造成趋势。
有幸从一位敌人那里失去Alibaba外部出品强推的“Flutter进阶学习笔记”，秉承好货色的当然要共享的准则，明天就来秀一把，试试这“Flutter进阶学习笔记”是否也能让你事倍功半！
第一章 为什么Flutter是跨平台开发的终极之选
跨平台开发是当下最受欢迎、利用最宽泛的框架之一。能实现跨平台开发的框架也形形色色，让人目迷五色。
最风行的跨平台框架有 Xamarin、PhoneGap、Ionic、Titanium、Monaca、Sencha、jQuery Mobile、React native、Flutter 等等。但这些工具的体现也是高下有别，各有千秋。
在这些风行的框架中，有很多也曾经隐没在了历史的长河中被人慢慢忘记了。但 React native 和 Flutter 这俩框架位置仍旧坚挺，备受欢送。
因为它们俩别离由最弱小的科技巨头 Facebook 和谷歌背书反对。
第二章 在Windows上搭建Flutter开发环境
- 应用镜像
- 零碎要求
- 获取Flutter SDK
- 编辑器设置
- Android设置
- 起步: 配置编辑器
- 起步: 体验
- 体验热重载
进阶学习笔记收费分享，如有须要，能够我的【Github】浏览下载
第三章 编写您的第一个 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.02.在Android Studio的编辑器视图中查看pubspec时，单击右上角的 Packages get，这会将依赖包装置到您的我的项目。您能够在控制台中看到以下内容：
flutter packages getRunning "flutter packages get"in startup_namer...Process finished with exit code 03.在 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）
Stateless widgets 是不可变的, 这意味着它们的属性不能扭转 - 所有的值都是最终的.
Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至多须要两个类:
1.一个 StatefulWidget类。
2.一个 State类。 StatefulWidget类自身是不变的，然而 State类在widget生命周期中始终存在.
在这一步中，您将增加一个有状态的widget-RandomWords，它创立其State类RandomWordsState。State类将最终为widget保护倡议的和喜爱的单词对。
1.增加有状态的 RandomWords widget 到 main.dart。 它也能够在MyApp之外的文件的任何地位应用，然而本示例将它放到了文件的底部。RandomWords widget除了创立State类之外简直没有其余任何货色
classRandomWordsextendsStatefulWidget{@overridecreateState()=>newRandomWordsState();}2.增加 RandomWordsState 类.该应用程序的大部分代码都在该类中， 该类持有RandomWords widget的状态。这个类将保留随着用户滚动而有限增长的生成的单词对， 以及喜爱的单词对，用户通过反复点击心形 ❤️ 图标来将它们从列表中增加或删除。
你会一步一步地建设这个类。首先，通过增加高亮显示的代码创立一个最小类
class RandomWordsState extends State<RandomWords>{}3.在增加状态类后，IDE会提醒该类短少build办法。接下来，您将增加一个根本的build办法，该办法通过将生成单词对的代码从MyApp挪动到RandomWordsState来生成单词对。
将build办法增加到RandomWordState中，如上面高亮代码所示
classRandomWordsStateextendsState<RandomWords>{@overrideWidget build(BuildContext context){final wordPair =new WordPair.random();returnnew Text(wordPair.asPascalCase);}}4.通过上面高亮显示的代码，将生成单词对代的码从MyApp挪动到RandomWordsState中
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(wordPair.asPascalCase), child:newRandomWords(),),),);}}重新启动应用程序。如果您尝试热重载，则可能会看到一条正告：
Reloading...Not all changed program elements ran during view reassembly; considerrestarting.这可能是误报，但思考到重新启动能够确保您的更改在利用界面中失效。
应用程序应该像之前一样运行，每次热重载或保留应用程序时都会显示一个单词对。
遇到问题?
如果您的利用程序运行不失常，能够应用上面链接中的代码来比照更正。
· lib/main.dart
第4步: 创立一个有限滚动ListView
在这一步中，您将扩大（继承）RandomWordsState类，以生成并显示单词对列表。 当用户滚动时，ListView中显示的列表将有限增长。 ListView的builder工厂构造函数容许您按需建设一个懒加载的列表视图。
1.向RandomWordsState类中增加一个_suggestions列表以保留倡议的单词对。 该变量以下划线（_）结尾，在Dart语言中应用下划线前缀标识符，会强制其变成公有的。
另外，增加一个biggerFont变量来增大字体大小
classRandomWordsStateextendsState<RandomWords>{final _suggestions =<WordPair>[];final _biggerFont =constTextStyle(fontSize:18.0);...}2.向RandomWordsState类增加一个 _buildSuggestions() 函数. 此办法构建显示倡议单词对的ListView。
ListView类提供了一个builder属性，itemBuilder 值是一个匿名回调函数， 承受两个参数- BuildContext和行迭代器i。迭代器从0开始， 每调用一次该函数，i就会自增1，对于每个倡议的单词对都会执行一次。该模型容许倡议的单词对列表在用户滚动时有限增长。
增加如下高亮的行:
classRandomWordsStateextendsState<RandomWords>{...Widget _buildSuggestions(){returnnew ListView.builder(padding:const EdgeInsets.all(16.0),// 对于每个倡议的单词对都会调用一次itemBuilder，而后将单词对增加到ListTile行中// 在偶数行，该函数会为单词对增加一个ListTile row.// 在奇数行，该函数会增加一个分割线widget，来分隔相邻的词对。// 留神，在小屏幕上，分割线看起来可能比拟吃力。itemBuilder:(context, i){// 在每一列之前，增加一个1像素高的分隔线widgetif(i.isOdd)returnnew Divider();// 语法 "i ~/ 2" 示意i除以2，但返回值是整形（向下取整），比方i为：1, 2, 3, 4, 5// 时，后果为0, 1, 1, 2, 2， 这能够计算出ListView中减去分隔线后的理论单词对数量final index = i ~/2;// 如果是倡议列表中最初一个单词对if(index >= _suggestions.length){// ...接着再生成10个单词对，而后增加到倡议列表_suggestions.addAll(generateWordPairs().take(10));}return_buildRow(_suggestions[index]);});}}3.对于每一个单词对，_buildSuggestions函数都会调用一次_buildRow。 这个函数在ListTile中显示每个新词对，这使您在下一步中能够生成更丑陋的显示行
在RandomWordsState中增加一个_buildRow函数 :
classRandomWordsStateextendsState<RandomWords>{...Widget _buildRow(WordPair pair){returnnew ListTile(title:new Text(pair.asPascalCase,style: _biggerFont,),);}}4.更新RandomWordsState的build办法以应用_buildSuggestions()，而不是间接调用单词生成库。 更改后如上面高亮局部：classRandomWordsStateextendsState<RandomWords>{...@override Widget build(BuildContext context){final wordPair =new WordPair.random();// 删除这两行returnnew Text(wordPair.asPascalCase);returnnew Scaffold (appBar:new AppBar(title:new Text('Startup Name Generator'),),body:_buildSuggestions(),);}...}\5.更新MyApp的build办法。从MyApp中删除Scaffold和AppBar实例。 这些将由RandomWordsState治理，这使得用户在下一步中从一个屏幕导航到另一个屏幕时， 能够更轻松地更改导航栏中的的路由名称。
用上面高亮局部替换最后的build办法：
classMyAppextendsStatelessWidget{@overrideWidget build(BuildContext context){returnnew MaterialApp(title:'Startup Name Generator',home:new RandomWords(),);}}重新启动应用程序。你应该看到一个单词对列表。尽可能地向下滚动，您将持续看到新的单词对。
遇到问题?
如果你的利用没有失常运行，你能够应用一下链接中的代码比照更正。
· lib/main.dart
第5步: 增加交互
在这一步中，您将为每一行增加一个可点击的心形 ❤️ 图标。当用户点击列表中的条目，切换其“珍藏”状态时，将该词对增加到或移除出“收藏夹”。
1.增加一个 _saved Set(汇合) 到RandomWordsState。这个汇合存储用户喜爱（珍藏）的单词对。 在这里，Set比List更适合，因为Set中不容许反复的值。
classRandomWordsStateextendsState<RandomWords>{final _suggestions =<WordPair>[];final _saved =new Set<WordPair>();final _biggerFont =constTextStyle(fontSize:18.0);...}2.在 _buildRow 办法中增加 alreadySaved来查看确保单词对还没有增加到收藏夹中。
Widget _buildRow(WordPair pair){final alreadySaved = _saved.contains(pair);...}3.同时在 _buildRow()中， 增加一个心形 ❤️ 图标到 ListTiles以启用珍藏性能。接下来，你就能够给心形 ❤️ 图标增加交互能力了。
增加上面高亮的行:
Widget _buildRow(WordPair pair){final alreadySaved = _saved.contains(pair);returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont,),trailing:new Icon(alreadySaved ? Icons.favorite : Icons.favorite_border,color: alreadySaved ? Colors.red :null,),);}4.重新启动利用。你当初能够在每一行看到心形❤️图标️，但它们还没有交互。
在 _buildRow中让心形❤️图标变得能够点击。如果单词条目曾经增加到收藏夹中， 再次点击它将其从收藏夹中删除。当心形❤️图标被点击时，函数调用setState()告诉框架状态曾经扭转。
增加如下高亮的行:
Widget _buildRow(WordPair pair){final alreadySaved = _saved.contains(pair);returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont,), trailing:newIcon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red :null,),onTap:(){setState((){if(alreadySaved){_saved.remove(pair);}else{_saved.add(pair);}});},);}提醒: 在Flutter的响应式格调的框架中，调用setState() 会为State对象触发build()办法，从而导致对UI的更新
热重载你的利用。你就能够点击任何一行珍藏或移除。请留神，点击一行时会生成从心形 ❤️ 图标收回的水波动画.
遇到了问题?
如果您的利用没有失常运行，请查看上面链接处的代码，比照更正。
· lib/main.dart
第6步: 导航到新页面
在这一步中，您将增加一个显示收藏夹内容的新页面（在Flutter中称为路由(route)）。您将学习如何在主路由和新路由之间导航（切换页面）。
在Flutter中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。 从导航器的栈中弹出（pop）路由，将显示返回到前一个路由。
1.在RandomWordsState的build办法中为AppBar增加一个列表图标。当用户点击列表图标时，蕴含收藏夹的新路由页面入栈显示。
提醒: 某些widget属性须要单个widget（child），而其它一些属性，如action，须要一组widgets(children），用方括号[]示意。
将该图标及其相应的操作增加到build办法中：
classRandomWordsStateextendsState<RandomWords>{...@override Widget build(BuildContext context){returnnewScaffold( appBar:newAppBar( title:newText('Startup Name Generator'),actions:<Widget>[new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),],), body:_buildSuggestions(),);}...}2.向RandomWordsState类增加一个 _pushSaved() 办法.
classRandomWordsStateextendsState<RandomWords>{...void_pushSaved(){}}热重载利用，列表图标将会呈现在导航栏中。当初点击它不会有任何反馈，因为 _pushSaved 函数还是空的。
3.当用户点击导航栏中的列表图标时，建设一个路由并将其推入到导航管理器栈中。此操作会切换页面以显示新路由。
新页面的内容在在MaterialPageRoute的builder属性中构建，builder是一个匿名函数。
增加Navigator.push调用，这会使路由入栈（当前路由入栈均指推入到导航管理器的栈）
void_pushSaved(){Navigator.of(context).push();}4.增加MaterialPageRoute及其builder。 当初，增加生成ListTile行的代码。ListTile的divideTiles()办法在每个ListTile之间增加1像素的分割线。 该 divided 变量持有最终的列表项。
void_pushSaved(){ Navigator.of(context).push(new MaterialPageRoute(builder:(context){final tiles = _saved.map((pair){returnnew ListTile(title:new Text(pair.asPascalCase,style: _biggerFont,),);},);final divided = ListTile.divideTiles(context: context,tiles: tiles,).toList();},),);}5.builder返回一个Scaffold，其中蕴含名为“Saved Suggestions”的新路由的利用栏。 新路由的body由蕴含ListTiles行的ListView组成; 每行之间通过一个分隔线分隔。
增加如下高亮的代码:
void_pushSaved(){ Navigator.of(context).push(newMaterialPageRoute( builder:(context){final tiles = _saved.map((pair){returnnewListTile( title:newText( pair.asPascalCase, style: _biggerFont,),);},);final divided = ListTile.divideTiles( context: context, tiles: tiles,).toList();returnnew Scaffold(appBar:new AppBar(title:new Text('Saved Suggestions'),),body:new ListView(children: divided),);},),);}5.热重载应用程序。珍藏一些选项，并点击利用栏中的列表图标，在新路由页面中显示珍藏的内容。 请留神，导航器会在利用栏中增加一个“返回”按钮。你不用显式实现Navigator.pop。点击后退按钮返回到主页路由。
遇到了问题?
如果您的利用不能失常工作，请参考上面链接处的代码，比照并更正。
· lib/main.dart
第7步：应用主题更改UI
在这最初一步中，您将会应用主题。主题管制您应用程序的外观和格调。您能够应用默认主题，该主题取决于物理设施或模拟器，也能够自定义主题以适应您的品牌。
1.您能够通过配置ThemeData类轻松更改应用程序的主题。 您的应用程序目前应用默认主题，上面将更改primary color色彩为红色。
通过如下高亮局部代码，将应用程序的主题更改为红色：
classMyAppextendsStatelessWidget{@overrideWidget build(BuildContext context){returnnewMaterialApp( title:'Startup Name Generator',theme:new ThemeData(primaryColor: Colors.white,), home:newRandomWords(),);}}2.热重载利用。 请留神，整个背景将会变为红色，包含利用栏。
3.作为读者的一个练习，应用 ThemeData 来扭转UI的其余方面。 Material library中的Colors类提供了许多能够应用的色彩常量， 你能够应用热重载来疾速简略地尝试、试验。
遇到了问题?
如果你遇到了问题，请查看以下链接中应用程序的最终代码。
· lib/main.dart
结语
因为文章篇幅无限，仅展现一部分内容，此份笔记还蕴含Flutter开发环境搭建和调试、Dart语法篇之汇合的应用与源码解析、Dart语法篇之汇合操作符函数与源码剖析等等。