关于android:爱了阿里大牛最佳总结Flutter进阶学习笔记理论与实战

去年，2019 年无疑是 Flutter 技术热火朝天倒退的一年。

每一个挪动开发者都在为 Flutter 带来的“疾速开发、富裕表现力和灵便的 UI、原生性能”的特色和理念而痴狂，从超级 App 到独立利用，从纯 Flutter 到混合栈，开发者们在不同的场景下乐此不疲的摸索和利用着 Flutter 技术，也在面临着各种各样不同的挑战。

Alibaba 团体内也有越来越多的业务和团队开始尝试 Flutter 技术栈，从闲鱼的一支独秀引领潮流，到现在淘宝特价版、盒马、优酷、飞猪等 BU 业务相继入局，Flutter 的业务利用在团体内也曾经逐步造成趋势。

有幸从一位敌人那里失去 Alibaba 外部出品强推的“Flutter 进阶学习笔记”，秉承好货色的当然要共享的准则，明天就来秀一把，试试这“Flutter 进阶学习笔记”是否也能让你事倍功半！

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

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

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

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

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

创立一个简略的、基于模板的 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 树对其到屏幕核心。

在这一步中，您将开始应用一个名为 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

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{
@override
createState()=>newRandomWordsState();}

2. 增加 RandomWordsState 类. 该应用程序的大部分代码都在该类中，该类持有 RandomWords widget 的状态。这个类将保留随着用户滚动而有限增长的生成的单词对，以及喜爱的单词对，用户通过反复点击心形 ❤️ 图标来将它们从列表中增加或删除。

你会一步一步地建设这个类。首先，通过增加高亮显示的代码创立一个最小类

class RandomWordsState extends State<RandomWords>{}

3. 在增加状态类后，IDE 会提醒该类短少 build 办法。接下来，您将增加一个根本的 build 办法，该办法通过将生成单词对的代码从 MyApp 挪动到 RandomWordsState 来生成单词对。

将 build 办法增加到 RandomWordState 中，如上面高亮代码所示

classRandomWordsStateextendsState<RandomWords>{
@override
Widget 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; consider
restarting.

这可能是误报，但思考到重新启动能够确保您的更改在利用界面中失效。
应用程序应该像之前一样运行，每次热重载或保留应用程序时都会显示一个单词对。

遇到问题?

如果您的利用程序运行不失常，能够应用上面链接中的代码来比照更正。

· lib/main.dart

在这一步中，您将扩大（继承）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 像素高的分隔线 widget
if(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{
@override
Widget build(BuildContext context){
returnnew MaterialApp(
title:'Startup Name Generator',
home:new RandomWords(),);
}}

重新启动应用程序。你应该看到一个单词对列表。尽可能地向下滚动，您将持续看到新的单词对。

遇到问题?

如果你的利用没有失常运行，你能够应用一下链接中的代码比照更正。

· lib/main.dart

在这一步中，您将为每一行增加一个可点击的心形 ❤️ 图标。当用户点击列表中的条目，切换其“珍藏”状态时，将该词对增加到或移除出“收藏夹”。

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

在这一步中，您将增加一个显示收藏夹内容的新页面（在 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

在这最初一步中，您将会应用主题。主题管制您应用程序的外观和格调。您能够应用默认主题，该主题取决于物理设施或模拟器，也能够自定义主题以适应您的品牌。

1. 您能够通过配置 ThemeData 类轻松更改应用程序的主题。您的应用程序目前应用默认主题，上面将更改 primary color 色彩为红色。

通过如下高亮局部代码，将应用程序的主题更改为红色：

classMyAppextendsStatelessWidget{

@override

Widget 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 语法篇之汇合操作符函数与源码剖析等等。

关于android:爱了阿里大牛最佳总结Flutter进阶学习笔记理论与实战

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

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

进阶学习笔记收费分享，如有须要，能够我的【Github】浏览下载

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

第 1 步: 创立 Flutter app

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

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

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

第 5 步: 增加交互

第 6 步: 导航到新页面

第 7 步：应用主题更改 UI

结语

敌人们如果有须要，能够我的【Github】浏览下载.

Just My Socks（注册教程内含优惠码）

关于android:爱了阿里大牛最佳总结Flutter进阶学习笔记理论与实战

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

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

进阶学习笔记收费分享，如有须要，能够我的【Github】浏览下载

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

第 1 步: 创立 Flutter app

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

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

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

第 5 步: 增加交互

第 6 步: 导航到新页面

第 7 步：应用主题更改 UI

结语

敌人们如果有须要，能够我的【Github】浏览下载.

Just My Socks（注册教程 内含优惠码）

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

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

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

Just My Socks（注册教程内含优惠码）