Flutter 的 Drawer widget 需搭配 Scaffold 使用，可用以設定 Scaffold 左側的選單。 其建構子如下： Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel }) 屬性如下： Name Type Description child Widget The widget below this widget in the tree. elevation double The z-coordinate at which to place this drawer. This controls the size of the shadow below the drawer. semanticLabel String The semantic label of the dialog used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.

Flutter 的 BottomNavigationBar widget 需搭配 Scaffold 使用，可用以設定 Scaffold 下方的巡覽列。 其建構子如下： BottomNavigationBar({Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, BottomNavigationBarType type, Color fixedColor, double iconSize: 24.0 }) 屬性如下： Name Type Description currentIndex int The index into items of the current active item. fixedColor Color The color of the selected item when bottom navigation bar is BottomNavigationBarType.fixed. iconSize double The size of all of the BottomNavigationBarItem icons. items List The interactive items laid out within the bottom navigation bar.

Flutter 的 AppBar widget 需搭配 Scaffold 使用。 其建構子如下： AppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation: 4.0, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, double titleSpacing: NavigationToolbar.kMiddleSpacing, double toolbarOpacity: 1.0, double bottomOpacity: 1.0 }) 屬性如下： Name Type Description actions List Widgets to display after the title widget. automaticallyImplyLeading bool Controls whether we should try to imply the leading widget if null.

Flutter 的 Scaffold widget 可用來實現基本的 material design layout。 其建構子如下： Scaffold({Key key, PreferredSizeWidget appBar, Widget body, Widget floatingActionButton, FloatingActionButtonLocation floatingActionButtonLocation, FloatingActionButtonAnimator floatingActionButtonAnimator, List<Widget> persistentFooterButtons, Widget drawer, Widget endDrawer, Widget bottomNavigationBar, Color backgroundColor, bool resizeToAvoidBottomPadding: true, bool primary: true }) 屬性如下： Name Type Description appBar PreferredSizeWidget An app bar to display at the top of the scaffold. backgroundColor Color The color of the Material widget that underlies the entire Scaffold. body Widget The primary content of the scaffold.

Flutter 的 ListView 元件是一具備捲軸的元件且能用來顯示多筆內容的元件。 其建構子如下： ListView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, List<Widget> children: const [] }) ListView.builder({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true }) ListView.

Flutter 的 Card class 提供類似卡片的效果，該元件的四個角落為圓角，並具備有陰影的效果。 其建構子如下： Card({Key key, Color color, double elevation: 2.0, Widget child }) 屬性如下： Name Type Description child Widget The widget below this widget in the tree. color Color The color of material used for this card. elevation double The z-coordinate at which to place this card. This controls the size of the shadow below the card. hashCode int The hash code for this object. key Key Controls how one widget replaces another widget in the tree.

Flutter 的 ButtonBar widget 可以用來做按鈕的水平排列。 其建構子如下： ButtonBar({Key key, MainAxisAlignment alignment: MainAxisAlignment.end, MainAxisSize mainAxisSize: MainAxisSize.max, List<Widget> children: const [] }) 屬性如下： Name Type Description alignment MainAxisAlignment How the children should be placed along the horizontal axis. children List The buttons to arrange horizontally. mainAxisSize MainAxisSize How much horizontal space is available. See Row.mainAxisSize. hashCode int The hash code for this object. key Key Controls how one widget replaces another widget in the tree.

Flutter 的 Stateless widget 指的是無狀態的 widget。 使用時會建立一個繼承自 StatelessWidget 的子類別，然後複寫處理 build 方法，在該方法描述要怎樣建立該 widget。 ... class MyWidget extends StatelessWidget { ... @override Widget build(BuildContext context) { ... } } ... 像是下面這邊筆者就試著建立了一個簡單的 widget，用 Container widget 與 Icon widget 搭配，簡單的做了類似於 Button 的效果，並允許由 widget 外部注入去決定要呈現的 icon。 import 'package:flutter/material.dart'; void main() { runApp( new MaterialApp( home: new Center ( child: new MyWidget(icon: Icons.add) ) ) ); } class MyWidget extends StatelessWidget { MyWidget({this.icon}); final IconData icon; @override Widget build(BuildContext context) { return new Container( width: 200.

Flutter 的 FloatingActionButton widget 可以用來做按鈕的呈現，一般會搭配 Scaffold一起使用。 其建構子如下： FloatingActionButton({Key key, Widget child, String tooltip, Color backgroundColor, Object heroTag: const _DefaultHeroTag(), double elevation: 6.0, double highlightElevation: 12.0, @required VoidCallback onPressed, bool mini: false, double notchMargin: 4.0 }) 屬性如下： Name Type Description backgroundColor Color The color to use when filling the button. child Widget The widget below this widget in the tree. elevation double The z-coordinate at which to place this button. This controls the size of the shadow below the floating action button.

Flutter 的 RaisedButton widget 可以用來做按鈕的呈現。 其建構子如下： RaisedButton({Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation: 2.0, double highlightElevation: 8.0, double disabledElevation: 0.0, EdgeInsetsGeometry padding, ShapeBorder shape, Duration animationDuration: kThemeChangeDuration, Widget child }) 屬性如下： Name Type Description animationDuration Duration Defines the duration of animated changes for shape and elevation. child Widget The button’s label. color Color The button’s fill color, displayed by its Material, while it is in its default (unpressed, enabled) state.

Flutter 的 Icon widget 可用來顯示 icon。 其建構子如下： Icon(IconData icon, { Key key, double size, Color color, String semanticLabel, TextDirection textDirection }) 屬性如下： Name Type Description color Color The color to use when drawing the icon. icon IconData The icon to display. The available icons are described in Icons. semanticLabel String Semantic label for the icon. size double The size of the icon in logical pixels. textDirection TextDirection The text direction to use for rendering the icon.

Flutter 的 FlutterLogo widget 可用來顯示 Flutter 的 Logo。 其建構子如下： FlutterLogo({Key key, double size, MaterialColor colors, Color textColor: const Color(0xFF616161), FlutterLogoStyle style: FlutterLogoStyle.markOnly, Duration duration: const Duration(milliseconds: 750), Curve curve: Curves.fastOutSlowIn }) 屬性如下： Name Type Description colors MaterialColor The color swatch to use to paint the logo, Colors.blue by default. curve Curve The curve for the logo animation if the style, colors, or textColor change. duration Duration The length of time for the animation if the style, colors, or textColor properties are changed.

要將 Flutter app 安裝至連接的裝置，可以調用下列命令。 Flutter install 命令調用後 Flutter app 會被安裝至連接的裝置，直接點擊開啟即可使用。

Flutter 的 Placeholder widget 主要用來標示後續會被其它 Widget 取代的地方。 其建構子如下： Placeholder({Key key, Color color: const Color(0xFF455A64), double strokeWidth: 2.0, double fallbackWidth: 400.0, double fallbackHeight: 400.0 }) 屬性如下： Name Type Description color Color The color to draw the placeholder box. fallbackHeight double The height to use when the placeholder is in a situation with an unbounded height. fallbackWidth double The width to use when the placeholder is in a situation with an unbounded width.

Flutter 的 Column widget 可用來將子元件垂直放置。 其建構子如下： Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List<Widget> children: const [] }) 屬性如下： Name Type Description children List The widgets below this widget in the tree. crossAxisAlignment CrossAxisAlignment How the children should be placed along the cross axis. direction Axis The direction to use as the main axis. hashCode int The hash code for this object.

Flutter 的 Container widget 是能用來繪製、設定位置/尺寸的容器 widget。 其建構子如下： Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child }) 屬性如下： Name Type Description alignment AlignmentGeometry Align the child within the container. child Widget The child contained by the container. constraints BoxConstraints Additional constraints to apply to the child. decoration Decoration The decoration to paint behind the child. foregroundDecoration Decoration The decoration to paint in front of the child.

Flutter 的 Center widget 可用來做置中的呈現。 其建構子如下： Center({Key key, double widthFactor, double heightFactor, Widget child }) 屬性如下： Name Type Description alignment AlignmentGeometry How to align the child. child Widget The widget below this widget in the tree. hashCode int The hash code for this object. heightFactor double If non-null, sets its height to the child’s height multiplied by this factor. key Key Controls how one widget replaces another widget in the tree.

要使用 Flutter CLI 列出所有連接的裝置，可以調用下列命令。 Flutter devices 命令調用後會顯示所有連接的裝置。 這命令可用來確認裝置的連接狀態，如果同時有多個裝置連接，我們也可以用這命令確認裝置的識別碼，用以指定運行到特定的裝置。

要使用 Flutter CLI 運行 Flutter app，可以調用下列命令。 Flutter run 命令調用後會顯示運行時可供使用的功能。 且 Flutter app 會被運行起來。 Flutter app 運行的當中我們可以開啟 http://127.0.0.1:8101，進行 Flutter app 的 profiling。 如果開發中要進行 app 的重載，可以使用 r 進行 hot reload，或是按下 R 進行 app 的重載。 像是這邊筆者將正在運行中的程式做個簡單的修改。 按下 R 將 app 重載，Flutter 只花了 748 ms 就完成了重載的動作。 如果要查看更多支援的操作，可以按下 h，會將更進階操作功能顯示出來。 像是按下 w 可以看到 app 的 widget 的階層架構。 按下 t 可以看到 app 的 rendering tree。 按下 L 可以查看 app 的 layout。 按下 p 可以顯示 construction lines。 按下 s 可以擷取畫面。

Flutter 的 Text widget 可以用來做簡易的文字顯示。 其建構子如下： Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines }) 屬性如下： Name Type Description data String The text to display. maxLines int An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow. overflow TextOverflow How visual overflow should be handled.

Flutter 專案建立後可以先撰寫個簡單的 Hello world 程式，lib/main.dart 為 Flutter 程式的主要進入點，將之開啟後撰寫如下程式。 import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } 可以看到 Flutter 程式撰寫上主要有幾個要注意的部分，首先需引用 flutter/material.dart 套件。 import 'package:flutter/material.dart'; 再來就是要在 main 這個處函式內調用 runApp 方法，runApp 方法調用時要帶入構成畫面的 widget。 void main() { runApp(...); } 像是這邊的範例就帶入了一個 Center 的 Widget，Center 的 Widget 內又放置了一個 Text Widget，所以 Text Widget 設定的字串會在程式的正中央顯示。

要在 VS Code 運行 Flutter，需先安裝 Dart Code 套件。 安裝完後重啟 VS Code。 使用 Command Palette 調用 Flutter: New Project。 輸入 Flutter 專案名稱（專案的名稱必須要全小寫）後按下 Enter 建繼續。 選取專案要放置的位置。 Flutter 專案即會被建立在指定的位置。 接著進行除錯上的設定。 點選 Open launch.json，VS Code 會幫我們自動產生對應的 launch.json 檔。 點選 Start Debugging 按鈕。 即會進入 Flutter 專案的除錯。 Link Get Started: Configure Editor - Flutter Get Started: Test Drive - Flutter

Flutter 安裝目錄下的 examples 目錄附有一些 Flutter 的範例程式，學習時可先從這邊下手。 可先調用命令將範例運行起來操作看看，再對照看程式是怎麼撰寫的。 flutter run 若是將 hello_world 範例運行起來，會看到… 運行 platform_view… 運行 catalog… 運行 stocks… 運行 flutter_gallery… 運行 platform_channel… 運行 flutter_view…

要在 Mac 中使用 Flutter，首先要先用 Git 將 Flutter 抓取下來。 git clone -b beta https://github.com/flutter/flutter.git 然後設定 Flutter 路徑參考，可以在 Terminal 直接輸入設定。 export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH 也可以開啟 HOME/.bash_profile 修改，加入上述設定，然後調用下面命令重新讀取設定值。 source $HOME/.bash_profile 設定好後調用下面命令，檢驗環境中所缺少的依賴。 flutter doctor 運行完可以看到缺少的依賴有哪些，且會很詳細的顯示該怎麼處理，接著只要照著指示反覆將缺少的依賴修正即可。 Link Get Started: Install on macOS - Flutter