2.4 初識Flutter工程

有了前面的Dart和Flutter的理論知識鋪墊，接下來開始進入實戰環節。首先介紹Flutter工程的組成結構。

2.4.1 Flutter工程結構特點

在第1章介紹了如何創建Flutter工程，工程創建好后，包含以下目錄。

? /lib：存放Flutter應用代碼，使用Dart語言進行開發。

? /android：原生Android殼工程，用于構建Android APK，在運行時，Android應用會自動加載Flutter應用代碼并執行。

? /ios：原生iOS殼工程，用于iOS平臺上運行Flutter應用。

Android、iOS原生工程涉及對應平臺的原生開發技術。如在Android平臺使用Kotlin、Java作為開發語言，使用Gradle進行依賴管理。iOS平臺采用Swift、Objective-C作為開發語言，使用CocoaPods進行依賴管理。

對于Flutter開發而言，殼工程主要用來加載Flutter應用。在Flutter入門階段，讀者可以暫時忽略兩個原生殼工程，將重點聚焦于/lib目錄下的Flutter應用開發。

/lib/main.dart是應用的入口文件，其中包含main函數：

其中，引入了material包。runApp函數的作用是運行Flutter Framework，并接收一個組件，將其展示到屏幕上。

下面對main.dart中涉及的核心組件進行說明。

2.4.2 App組件——應用架構的基石

在Flutter中提供了WidgetsApp作為整個應用的根組件，它的作用是統一提供組成APP必不可少的基礎架構組件。開發者只需要使用WidgetsApp作為根組件，整個APP中就可以直接使用路由導航、本地化、主題等功能。

MaterialApp是基于WidgetsApp的派生組件，它在WidgetsApp的基礎之上實現了Material De-sign設計風格。除此之外，還有CupertinoApp，它基于WidgetsApp實現了iOS設計風格。在實際開發中，可以根據所需的設計風格進行選擇。在本書中，將主要介紹MaterialApp組件的使用。

runApp接收組件MyApp，它的代碼為：

其中，MyApp是一個無狀態組件，它返回MaterialApp組件。MaterialApp基于WidgetsApp，集成了應用中所需的各種基本功能，如Navigator導航路由等，并支持對設計主題進行設置。

在MaterialApp的傳入參數中，title指定應用名稱，theme傳入一個ThemeData實例，用于指定主題樣式。home用于指定首頁，代碼中傳入了MyHomePage。

2.4.3 Scaffold組件——頁面的骨架

Scaffold組件提供了Material Design風格頁面的布局框架，對常用的頁面布局進行封裝，比如標題欄、側邊導航抽屜、底部導航欄、snack bar、bottom sheets、FAB懸浮按鈕等。開發者只要通過組件屬性設置，就能夠完成高質量Material Design頁面開發。

MyHomePage是main.dart中默認創建的一個帶有計數器功能的組件，其代碼如下：

其中，MyHomePage是一個有狀態組件，并定義了一個＿counter狀態，用于統計按鈕單擊次數。

＿MyHomePageState返回中，包含Scaffold組件，這個組件定義了頁面的整體框架。基于Scaffold可以方便地搭建好頁面整體框架。如在上面代的碼中，通過Scaffold的appBar指定了標題欄，通過body指定內容區域，通過floatingActionButton創建了一個FAB懸浮按鈕。