{"id":1145,"date":"2023-03-16T22:04:27","date_gmt":"2023-03-16T14:04:27","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1145"},"modified":"2023-03-16T22:04:56","modified_gmt":"2023-03-16T14:04:56","slug":"flutter-widget-buton","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/16\/flutter-widget-buton\/","title":{"rendered":"Flutter Widget\u4e4bButon"},"content":{"rendered":"<p>Widget\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/flutter.io\/docs\/development\/ui\/widgets\">https:\/\/flutter.io\/docs\/development\/ui\/widgets<\/a><br \/>\nRaisedButton\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/material\/RaisedButton-class.html\">https:\/\/docs.flutter.io\/flutter\/material\/RaisedButton-class.html<\/a><br \/>\nFlatButton\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/material\/FlatButton-class.html\">https:\/\/docs.flutter.io\/flutter\/material\/FlatButton-class.html<\/a><br \/>\nMaterialButton\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/material\/MaterialButton-class.html\">https:\/\/docs.flutter.io\/flutter\/material\/MaterialButton-class.html<\/a><br \/>\nOutlineButton\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/material\/OutlineButton-class.html\">https:\/\/docs.flutter.io\/flutter\/material\/OutlineButton-class.html<\/a><br \/>\nCupertinoButton\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/docs.flutter.io\/flutter\/cupertino\/CupertinoButton-class.html\">https:\/\/docs.flutter.io\/flutter\/cupertino\/CupertinoButton-class.html<\/a><\/p>\n<p><!-- more --><\/p>\n<pre><code class=\"language-dart\">import &#039;package:flutter\/cupertino.dart&#039;;\nimport &#039;package:flutter\/material.dart&#039;;\n\nclass ButtonDemoPage extends StatefulWidget {\n  @override\n  State&lt;StatefulWidget&gt; createState() =&gt; new _ButtonDemoPageState();\n}\n\nclass _ButtonDemoPageState extends State&lt;ButtonDemoPage&gt; {\n  void onRaisedButtonClicked() {\n    print(&#039;onRaisedButtonClicked&#039;);\n  }\n\n  void onHighLightChanged(bool highLight) {\n    print(&#039;onHighLightChanged: $highLight&#039;);\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return new Scaffold(\n      appBar: new AppBar(title: new Text(&#039;Button Page Demo&#039;),),\n      body: Center(\n        child: ButtonBuilder().getButtons(context),\n      ),\n    );\n  }\n}\n\nclass ButtonBuilder {\n  VoidCallback onButtonPressed(BuildContext context) {\n    return () {\n      showToast(context, &#039;onButtonPressed&#039;);\n    };\n  }\n\n  ValueChanged&lt;bool&gt; onHighlightChanged(BuildContext context) {\n    return (bool b) {\n      \/\/showToast(context, &quot;onHighlightChanged:&quot; + b.toString());\n    };\n  }\n\n  Widget getButtons(BuildContext context) {\n    return new Column(children: [\n      SizedBox(height: 10),\n      new Expanded(flex: 0, child: getMaterialButton(context)),\n      SizedBox(height: 10),\n      new Expanded(flex: 0, child: getRaisedButtonRow(context)),\n      SizedBox(height: 10),\n      new Expanded(flex: 0, child: getFlatButtonRow(context)),\n      SizedBox(height: 10),\n      new Expanded(flex: 0, child: getOutlineButtonRow(context)),\n      SizedBox(height: 10),\n      new Expanded(flex: 0, child: getCupertinoButton(context)),\n      SizedBox(height: 10),\n    ]);\n  }\n\n  Widget getMaterialButton(BuildContext context) {\n    return MaterialButton(\n      key: ValueKey(&quot;text&quot;),\n      child: Text(&quot;MaterialButton&quot;),\n      onPressed: onButtonPressed(context),\n      onHighlightChanged: onHighlightChanged(context),\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.blue,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      disabledColor: Colors.grey,\n      highlightColor: Colors.grey,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.green,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      colorBrightness: Brightness.light,\n      \/\/ \u4e3b\u9898\n      elevation: 10,\n      highlightElevation: 10,\n      disabledElevation: 10,\n      padding: EdgeInsets.all(10),\n      \/\/ MaterialButton shape \u5b50\u7c7b\u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(20)),\n          side: BorderSide(\n              color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      materialTapTargetSize: MaterialTapTargetSize.padded,\n      animationDuration: Duration(seconds: 1),\n      minWidth: 200,\n      height: 50,\n    );\n  }\n\n  Widget getRaisedButtonRow(BuildContext context) {\n    return new Row(children: [\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getRaisedButton(context)),\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getRaisedButtonIcon(context)),\n      SizedBox(width: 10),\n    ]);\n  }\n\n  Widget getRaisedButton(BuildContext context) {\n    return RaisedButton(\n      child: Text(&quot;RaisedButton&quot;),\n      onPressed: onButtonPressed(context),\n      onHighlightChanged: onHighlightChanged(context),\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.blue,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      disabledColor: Colors.grey,\n      highlightColor: Colors.grey,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.green,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      colorBrightness: Brightness.light,\n      \/\/ \u4e3b\u9898\n      elevation: 10,\n      highlightElevation: 10,\n      disabledElevation: 10,\n      padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(20)),\n          side: BorderSide(\n              color: Color(0xFFFFF00F), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      materialTapTargetSize: MaterialTapTargetSize.padded,\n      animationDuration: Duration(seconds: 1),\n      \/\/ minWidth: 200,\n      \/\/ height: 50,\n    );\n  }\n\n  Widget getRaisedButtonIcon(BuildContext context) {\n    return RaisedButton.icon(\n      icon: Icon(Icons.menu),\n      label: Text(&quot;RaisedButton.icon&quot;),\n      onPressed: onButtonPressed(context),\n      onHighlightChanged: onHighlightChanged(context),\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.blue,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      disabledColor: Colors.grey,\n      highlightColor: Colors.red,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      \/\/ splashColor: Colors.green,\/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      colorBrightness: Brightness.light,\n      \/\/ \u4e3b\u9898\n      elevation: 10,\n      highlightElevation: 10,\n      disabledElevation: 10,\n      \/\/ padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(10)),\n          side: BorderSide(\n              color: Color(0xFFF0F00), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      materialTapTargetSize: MaterialTapTargetSize.padded,\n      animationDuration: Duration(seconds: 1),\n\/\/      minWidth: 200,\n\/\/      height: 50,\n    );\n  }\n\n  Widget getFlatButtonRow(BuildContext context) {\n    return new Row(children: [\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getFlatButton(context)),\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getFlatButtonIcon(context)),\n      SizedBox(width: 10),\n    ]);\n  }\n\n  Widget getFlatButton(BuildContext context) {\n    return FlatButton(\n      child: Text(&quot;FlatButton&quot;),\n      onPressed: onButtonPressed(context),\n      onHighlightChanged: onHighlightChanged(context),\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.yellow,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      disabledColor: Colors.grey,\n      highlightColor: Colors.grey,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.transparent,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      colorBrightness: Brightness.light,\n      \/\/ \u4e3b\u9898\n      \/\/ elevation: 10,\n      \/\/ highlightElevation: 10,\n      \/\/ disabledElevation: 10,\n      padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(20)),\n          side: BorderSide(\n              color: Color(0xFFF9F3FF), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      materialTapTargetSize: MaterialTapTargetSize.padded,\n      \/\/ animationDuration: Duration(seconds:1),\n      \/\/ minWidth: 200,\n      \/\/ height: 50,\n    );\n  }\n\n  Widget getFlatButtonIcon(BuildContext context) {\n    return FlatButton.icon(\n      icon: Icon(\n        Icons.menu,\n        color: Colors.green,\n      ),\n      label: Text(&quot;FlatButton.icon&quot;),\n      onPressed: onButtonPressed(context),\n      onHighlightChanged: onHighlightChanged(context),\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.yellow,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      disabledColor: Colors.grey,\n      highlightColor: Colors.red,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.green,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      colorBrightness: Brightness.light,\n      \/\/ \u4e3b\u9898\n      \/\/ elevation: 10,\n      \/\/ highlightElevation: 10,\n      \/\/ disabledElevation: 10,\n      \/\/ padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(10)),\n          side: BorderSide(\n              color: Color(0xFF6FFF00), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      materialTapTargetSize: MaterialTapTargetSize.padded,\n      \/\/ animationDuration: Duration(seconds:1),\n      \/\/ minWidth: 200,\n      \/\/ height: 50,\n    );\n  }\n\n  Widget getOutlineButtonRow(BuildContext context) {\n    return new Row(children: [\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getOutlineButton(context)),\n      SizedBox(width: 10),\n      new Expanded(flex: 1, child: getOutlineButtonIcon(context)),\n      SizedBox(width: 10),\n    ]);\n  }\n\n  Widget getOutlineButton(BuildContext context) {\n    return OutlineButton(\n      child: Text(&quot;OutlineButton&quot;),\n      onPressed: onButtonPressed(context),\n      \/\/ onHighlightChanged: onHighlightChanged,\n      textTheme: ButtonTextTheme.accent,\n      textColor: Colors.blueAccent,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      \/\/ disabledColor: Colors.grey,\n      highlightColor: Color(0xFF2962FF),\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.red,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      \/\/ colorBrightness: Brightness.light,   \/\/ \u4e3b\u9898\n      \/\/ elevation: 10,\n      highlightElevation: 10,\n      \/\/ disabledElevation: 10,\n      padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n          borderRadius: BorderRadius.all(Radius.circular(20)),\n          side: BorderSide(\n              color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2)),\n      clipBehavior: Clip.antiAlias,\n      \/\/ materialTapTargetSize: MaterialTapTargetSize.padded,\n      \/\/ animationDuration: Duration(seconds:1),\n      \/\/ minWidth: 200,\n      \/\/ height: 50,\n    );\n  }\n\n  Widget getOutlineButtonIcon(BuildContext context) {\n    return OutlineButton.icon(\n      icon: Icon(\n        Icons.menu,\n        color: Colors.green,\n      ),\n      label: Text(&quot;OutlineButton.icon&quot;),\n      onPressed: onButtonPressed(context),\n      \/\/ onHighlightChanged: onHighlightChanged,\n      textTheme: ButtonTextTheme.normal,\n      textColor: Colors.yellow,\n      disabledTextColor: Colors.red,\n      color: Color(0xFF82B1FF),\n      \/\/ disabledColor: Colors.grey,\n      highlightColor: Colors.red,\n      \/\/ \u6309\u4e0b\u7684\u80cc\u666f\u8272\n      splashColor: Colors.green,\n      \/\/ \u6c34\u6ce2\u7eb9\u989c\u8272\n      \/\/ colorBrightness: Brightness.light,  \/\/ \u4e3b\u9898\n      \/\/ elevation: 10,\n      highlightElevation: 10,\n      \/\/ disabledElevation: 10,\n      padding: EdgeInsets.all(10),\n      \/\/ RaisedButton \u624d\u8d77\u6548\n      shape: RoundedRectangleBorder(\n        borderRadius: BorderRadius.all(Radius.circular(12)),\n      ),\n      clipBehavior: Clip.antiAlias,\n      \/\/ materialTapTargetSize: MaterialTapTargetSize.padded,\n      \/\/ animationDuration: Duration(seconds:1),\n      \/\/ minWidth: 200,\n      \/\/ height: 50,\n    );\n  }\n\n  Widget getCupertinoButton(BuildContext context) {\n    return CupertinoButton(\n      child: Text(&quot;CupertinoButton&quot;),\n      onPressed: onButtonPressed(context),\n      color: Colors.blue,\n      disabledColor: Colors.grey,\n      padding: EdgeInsets.all(10),\n      minSize: 50,\n      pressedOpacity: 0.8,\n      borderRadius: BorderRadius.all(Radius.circular(8.0)),\n    );\n  }\n\n  void showToast(BuildContext context, var msg) async {\n    Widget _buildToastWidget() {\n      return Center(\n        child: Card(\n          color: Colors.black26,\n          child: Padding(\n            padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),\n            child: Text(\n              msg,\n              style: TextStyle(\n                fontSize: 14.0,\n                color: Colors.white,\n              ),\n            ),\n          ),\n        ),\n      );\n    }\n\n    \/\/\u83b7\u53d6OverlayState\n    OverlayState overlayState = Overlay.of(context);\n    \/\/\u521b\u5efaOverlayEntry\n    OverlayEntry _overlayEntry = OverlayEntry(\n      \/\/toast\u9760\u5b83\u52a0\u5230\u5c4f\u5e55\u4e0a\n        builder: (BuildContext context) =&gt; Positioned(\n          \/\/top\u503c\uff0c\u53ef\u4ee5\u6539\u53d8\u8fd9\u4e2a\u503c\u6765\u6539\u53d8toast\u5728\u5c4f\u5e55\u4e2d\u7684\u4f4d\u7f6e\n          top: MediaQuery.of(context).size.height * 4 \/ 7,\n          child: Container(\n              alignment: Alignment.center,\n              width: MediaQuery.of(context).size.width,\n              child: Padding(\n                padding: EdgeInsets.symmetric(horizontal: 80.0),\n                child: _buildToastWidget(),\n              )),\n        ));\n    \/\/\u663e\u793a\u5230\u5c4f\u5e55\u4e0a\n    overlayState.insert(_overlayEntry);\n    \/\/\u7b49\u5f852\u79d2\n    await Future.delayed(Duration(seconds: 2));\n    \/\/\u79fb\u9664\n    _overlayEntry.remove();\n  }\n}<\/code><\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/Flutter\/Flutter_Widget_Button.png\" alt=\"Flutter Widget Button\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Widget\uff1ahttps:\/\/flutter.io\/docs\/development\/ui\/widgets R [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[305],"class_list":["post-1145","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter-widget"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1145"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1145\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}