Flutter - FloatingActionButton class

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 })

屬性如下：

NameTypeDescription
backgroundColorColorThe color to use when filling the button.
childWidgetThe widget below this widget in the tree.
elevationdoubleThe z-coordinate at which to place this button. This controls the size of the shadow below the floating action button.
heroTagObjectThe tag to apply to the button’s Hero widget.
highlightElevationdobuleThe z-coordinate at which to place this button when the user is touching the button. This controls the size of the shadow below the floating action button.
miniboolControls the size of this button.
notchMargindoubleThe margin to keep around the floating action button when creating a notch for it.
onPressedVoidCallbackThe callback that is called when the button is tapped or otherwise activated.
tooltipStringText that describes the action that will occur when the button is pressed.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
runtimeTypeTypeA representation of the runtime type of the object.

方法如下：

NameReturn TypeDescription
createState()_FloatingActionButtonStateCreates the mutable state for this widget at a given location in the tree.
createElement()StatefulElementCreates a StatefulElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder description)voidAdd additional properties associated with the node.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

FloatingActionButton 元件需在 MaterialApp 下使用，使用上要設定 onPressed 屬性，指定按鈕按下後要觸發的動作，child 屬性可設定按鈕上要呈現的圖片或文字，tooltip 可設定按鈕的提示訊息。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      home: new FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      )
    )
  );
}

1.png

2.png

3.png

backgroundColor 屬性可設定按鈕的背景色。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      home: new FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        backgroundColor: Colors.green
      )
    )
  );
}

4.png

5.png