「Flutter/UI/Button」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→上部バーの右にボタンを設置) |
|||
行56: | 行56: | ||
} | } | ||
List<Widget> _buildAppBarActionButton() { | List<Widget> _buildAppBarActionButton() { | ||
− | return | + | return <Widget>[ |
− | + | ||
MaterialButton( | MaterialButton( | ||
onPressed: () { | onPressed: () { | ||
行68: | 行67: | ||
), | ), | ||
), | ), | ||
+ | ) | ||
+ | ]; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===iconを右上に設定したい場合=== | ||
+ | [[flutter/アイコン追加]] [ショートカット] | ||
+ | <pre> | ||
+ | List<Widget> _buildAppBarActionButton() { | ||
+ | return <Widget>[ | ||
+ | MaterialButton( | ||
+ | onPressed: () { | ||
+ | }, | ||
+ | child: Icon( | ||
+ | Icons.settings, | ||
+ | color: Colors.white, | ||
+ | size: 30.0, | ||
+ | ) | ||
) | ) | ||
]; | ]; | ||
} | } | ||
</pre> | </pre> |
2019年5月14日 (火) 14:30時点における版
body内にボタンを表示
body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'hello', ), RaisedButton( child: Text('button1'), onPressed: () { // ボタン処理 }, ), ], ), ),
画面右下にボタンを表示
floatingActionButtonをScaffoldの項目に追加
return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'hello', ), ], ), ), floatingActionButton: FloatingActionButton( onPressed:() { // ボタン処理 }, tooltip: 'Increment', child: Icon(Icons.add), ), );
上部バーの右にボタンを設置
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("$widget.title"), actions: _buildAppBarActionButton() ), ); } List<Widget> _buildAppBarActionButton() { return <Widget>[ MaterialButton( onPressed: () { }, child: Text( "Setting", style: TextStyle( fontSize: 14.0, color: Colors.white ), ), ) ]; }
iconを右上に設定したい場合
flutter/アイコン追加 [ショートカット]
List<Widget> _buildAppBarActionButton() { return <Widget>[ MaterialButton( onPressed: () { }, child: Icon( Icons.settings, color: Colors.white, size: 30.0, ) ) ]; }