---
title: 'Flutter 組成架構'
---

Flutter組成架構
===
###### tags: `Flutter` `Framework`

## Flutter 框架結構
上圖為官方提供的Flutter框架，下面我們依序說明。
### Flutter Framework
1. Foundation和Animation、Painting、Gestures:
被合併為一個dart UI層，對應的是Flutter中的`dart:ui`包，它是Flutter底層UI資料庫，提供動畫、手勢及繪製能力。
2. Rendering:
它依賴於dart UI層，Rendering這一層會構建一個UI樹狀圖，當UI樹狀圖有變化時，會計算出有變化的部分，然後進行更新，最終將UI繪製到螢幕上。此層可以說是Flutter UI框架最核心的部分，它除了確定每個UI元素的位置、大小之外還要進行坐標轉換、繪製（調用底層`dart:ui`）。
3. Widgets和Material、Cupertino:
Widgets層是Flutter提供的的一套基礎組件庫，Material和Cupertino則是兩種不同的風格(Android/iOS)，而我們Flutter開發的大多數場景也只觸及這裡。
### Flutter Engine
這是一個純C++實現的SDK，其中包括了Skia引擎、Dart運行時、文字排版引擎等。在代碼調用`dart:ui`庫時，調用最終會走到Engine層，然後實現真正的繪製邏輯。

## 我們一般所接觸的

### Widgets
在Flutter這個程式架構中，所有的構成元件都是widget，不管事文字、圖片、按鈕或是標題、選單甚至是一整個頁面，整個應用程式都是用大大小小的widgets所堆疊起來的，形成一個widget tree。
另外，注意數量的使用以及是否有其他更好的方式進行但是都可以達到一樣的呈現效果，例如：

Container customizedListTitle(String title) {
  return Container(
    decoration: BoxDecoration(
      color: Colors.cyan,
      borderRadius: BorderRadius.all(
        Radius.circular((8)),
      ),
    ),
    child: ListTile(
      title: Text(title),
      trailing: Icon(Icons.chevron_right),
    ),
  );
}

ClipRRect customizedListTitle(String title) {
  return ClipRRect(
    borderRadius: BorderRadius.all(
      Radius.circular((8)),
    ),
    child: Container(
      color: Colors.cyan,
      child: ListTile(
        title: Text(title),
        trailing: Icon(Icons.chevron_right),
      ),
    ),
  );
}


以上兩段程式碼如上圖所呈現，前者是在Container底下利用BoxDecoration作圓弧裝飾；後者是將Container套進ClipRRect以達到一樣的結果。兩個方法並沒有優劣之分，但是以可擴充性來說，利用BoxDecoration可以將其抽出變成獨立的Function，其他的Container便也可以共用。

### Packages
#### pub.dev
這是一個官方套件網站，可以是Flutter自己開發的，也可能是第三方發表的，基本上在這邊都可以搜尋的到。


:::info
**提醒：** 下載套件很方便，有可能你只要輸入變數就好，其他別人都幫妳寫得好好的，但是要注意的是，己乎所有套件都是由官方的去進行二次修改在放在網上供大家使用，在下載前須注意兩件事：
1. 發表的License屬於誰的，能不能用？
2. 是不是下載了很多類似的套件，這些都大同小異其實可以自己做？
:::

#### yaml
上面網站中，選好你想要的套件，在yaml檔中根據你所要的套件名稱以及版本輸入，例如：

dependencies:
  cupertino_icons: ^0.1.3

存檔後再點選上方的`Packages get`或是在Terminatel輸入`pub get`，執行完便可使用。