雙倍NB！字節跳動資深研發花7天肝出的這份286頁「Flutter技術進階」

時間 2020-11-30

標籤前端 git github web 安全性能優化前端工程師閉包 app 框架欄目 Git 简体版

原文原文鏈接

**# 前言前端

截至目前，字節跳動有不少業務落地了 Flutter 技術方案，包括今日頭條、西瓜視頻、皮皮蝦等 20 多個業務在使用 Flutter 開發，有純 Flutter 工程，也有 Flutter 與 Native 的混合工程。git

字節跳動選擇 Flutter 的初心github

與其說Flutter是大前端技術，不如說是大移動端技術。Flutter 發展的 Roadmap 也是先全面支持 Android/iOS 端能力，再進一步完善 Web 端能力支持的。web

字節跳動對於客戶端技術仍是很是重視的，字節跳動有不少客戶端工程師，以前客戶端深刻點的基礎技術更可能是搞插件化、熱修復、性能優化、安全加固等，跨平臺方向一直都是前端工程師在竭盡全力地推動，屬於大前端方向。而 Flutter 是客戶端更有主導的跨平臺技術方案。安全

在字節跳動，跨平臺技術並無造成大規模的落地，也沒有歷史包袱，因此在面對跨平臺技術選型的時候，更關注跨平臺技術的技術上限以及發展潛力，自渲染技術的 Flutter 能夠理解爲更完全更純粹的跨平臺技術，伴隨着媲美原生的流暢度，這即是咱們選擇 Flutter 的初心。性能優化

如今愈來愈多的業務和團隊開始嘗試 Flutter 技術棧，做爲一名開發人員，掌握Flutter的使用是很是有必要的，特別是像阿里、騰訊等公司都使用普遍，那麼如何可以達到「精通」Flutter的程度？今天就來好好談談。前端工程師

簡單介紹一下這份Flutter技術進階筆記，每一個章節都是深刻解析了源碼底層在PDF裏邊有。爲了讓你們更好的學習Flutter技術，我也是第一時間展現給你們了！閉包

筆記內容所有免費分享， 有須要完整版筆記的小夥伴【點擊我】免費獲取哦！

第一章爲何Flutter是跨平臺開發的終極之選

跨平臺開發是當下最受歡迎、應用最普遍的框架之一。能實現跨平臺開發的框架也五花八門，讓人眼花繚亂。app

最流行的跨平臺框架有 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 都會運行.