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.