從 Flutter 官方的 sample code 學習 widget

學習開發 Flutter App 時，最重要的莫過於研究 Flutter 滿山滿谷的 widget。每個 widget 都有自己獨特的功能，有沒有方法能快速學習呢 ?

從 Flutter 官方的 sample code 學習

Flutter 為大部分的 widget 提供了範例程式，以 Scaffold 為例，Scaffold class 的網頁不只提供 Scaffold 的使用說明，還包含豐富的範例程式。

Scaffold class

而且我們不只能從網頁編輯執行範例，還可以在自己的電腦用 flutter command 抓取範例程式。

比方以下指令將抓取 Scaffold 的範例程式，範例的 id 為 material.Scaffold.1，專案取名為 mysample。

flutter create --sample=material.Scaffold.1 mysample

執行結果。

Creating project mysample...
Resolving dependencies in mysample... 
Got dependencies in mysample.
Wrote 128 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your sample application, type:

  $ cd mysample
  $ flutter run

Your sample application code is in mysample/lib/main.dart.

成功抓取專案後，現在我們可以方便地用 VS Code 編輯程式和執行 App。

如何知道有哪些 sample code

• 從 Widget class 的網頁。

比方從 PageView 的網頁得知 sample code 的 id 是 widgets.PageView.1。

PageView class

flutter create --sample=widgets.PageView.1 mysample

• 用 flutter 指令列出全部 sample code 的 id。

輸入以下指令產生 sample code 的清單，將結果存成 samples.json。

flutter create --list-samples=samples.json

• 從 Flutter 的 GitHub。

Flutter GitHub 的 examples/api/lib 下包含豐富的 sample code。

flutter/examples/api/lib at master · flutter/flutter

比方以下是 Scaffold 的 sample code。

flutter/examples/api/lib/material/scaffold at master · flutter/flutter

scaffold 資料夾下的 scaffold.1.dart 即為我們剛剛用 flutter create — sample=material.Scaffold.1 mysample 抓取的範例程式。

flutter/examples/api/lib/material/scaffold/scaffold.1.dart at master · flutter/flutter