Flutter 的 RaisedButton widget 可以用來做按鈕的呈現。

其建構子如下:

RaisedButton({Key key, @required VoidCallback onPressed, ValueChanged 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 })

屬性如下:

NameTypeDescription
animationDurationDurationDefines the duration of animated changes for shape and elevation.
childWidgetThe button’s label.
colorColorThe button’s fill color, displayed by its Material, while it is in its default (unpressed, enabled) state.
colorBrightnessBrightnessThe theme brightness to use for this button.
disabledColorColorThe fill color of the button when the button is disabled.
disabledElevationdoubleThe elevation for the button’s Material when the button is not enabled.
disabledTextColorColorThe color to use for this button’s text when the button is disabled.
elevationdoubleThe z-coordinate at which to place this button. This controls the size of the shadow below the raised button.
enabledboolWhether the button is enabled or disabled.
highlightColorColorThe highlight color of the button’s InkWell.
highlightElevationdoubleThe elevation for the button’s Material when the button is enabled but not pressed.
onHighlightChangedValueChangedCalled by the underlying InkWell widget’s InkWell.onHighlightChanged callback.
onPressedVoidCallbackCalled when the button is tapped or otherwise activated.
paddingEdgeInsetsGeometryThe internal padding for the button’s child.
shapeShapeBorderThe shape of the button’s Material.
splashColorColorThe splash color of the button’s InkWell.
textColorColorThe color to use for this button’s text.
textThemeButtonTextThemeDefines the button’s base colors, and the defaults for the button’s minimum size, internal padding, and shape.
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
build(BuildContext context)WidgetDescribes the part of the user interface represented by this widget.
debugFillProperties(DiagnosticPropertiesBuilder description)void
createElement()StatelessElementCreates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren()Listist of DiagnosticsNode objects describing this node’s children.
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.

RaisedButton 元件需在 MaterialApp 下使用,所以會要建立 MaterialApp,然後將 RaisedButton 元件塞給 MaterialApp 的 home 屬性。

RaisedButton 使用上要設定 onPressed 屬性,指定按鈕按下後要觸發的動作,color 屬性可設定按鈕的顏色,child 屬性則是設定按鈕上的標籤。

import 'package:flutter/material.dart';

void main() {
runApp(
new MaterialApp(
home: new RaisedButton(
onPressed: () {},
color: Colors.blue,
child: new Text(
'RaisedButton',
style: new TextStyle(color: Colors.white)
)
)
)
);
}

1.png

2.png

highlightColor 屬性可設定按鈕按下的顏色。

import 'package:flutter/material.dart';

void main() {
runApp(
new MaterialApp(
home: new RaisedButton(
onPressed: () {},
color: Colors.blue,
child: new Text(
'RaisedButton',
style: new TextStyle(color: Colors.white)
),
highlightColor: Colors.green,
)
)
);
}

3.png

4.png