前言

今天會進到flutter的部分，但在介紹程式碼前會先從基本的widget概念開始講起，基本上使用者在使用flutter開發的app時，在畫面上可以看到的所有東西都是widget構成的，widget是flutter最重要的概念，畫面上的icon是widget，甚至一個row或是column也都是widget，也因為有著widget的概念，flutter才會這麼好上手

Layouts in Flutter

如同前面所述，flutter排版機制的核心就是widget(元件)，圖片、icon、文字都是widget，甚至連layout models也都是widget，如下圖所示，畫面上的一切都是由layout呈現出來的。

並且flutter是以tree的概念去管理widget的，下圖可以看到widget是以tree的方式顯示的，但比較特別的地方是container，container是一種widget的class(類別)，使用container可以讓你客製那個container裡的child widget

創造可見的widget

• 創建text的widget

Text('Hello World'),

• 創建image的widget

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

• 創建icon的widget

Icon(
  Icons.star,
  color: Colors.red[500],
),

參考資料:
https://docs.flutter.dev/development/ui/layout