Flutter/UI/Button
提供: 初心者エンジニアの簡易メモ
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, ) ) ]; }