「Flutter/UI/Scaffold」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→上部バーの右にボタンを設置) |
|||
行45: | 行45: | ||
} | } | ||
</pre> | </pre> | ||
+ | |||
+ | ==上部バーの右に2つボタンを設置== | ||
+ | <pre> | ||
+ | actionsを以下のように変更。 | ||
+ | actions: <Widget>[ | ||
+ | IconButton( | ||
+ | icon: Icon(Icons.add), | ||
+ | onPressed: () => setState(() { | ||
+ | _count++; | ||
+ | }), | ||
+ | ), | ||
+ | IconButton( | ||
+ | icon: Icon(Icons.remove), | ||
+ | onPressed: () => setState(() { | ||
+ | _count--; | ||
+ | }), | ||
+ | ), | ||
+ | ], | ||
+ | </pre> | ||
+ | |||
==画面右下にボタンを表示== | ==画面右下にボタンを表示== | ||
floatingActionButtonをScaffoldの項目に追加 | floatingActionButtonをScaffoldの項目に追加 |
2019年11月16日 (土) 17:26時点における版
上部バーの右にボタンを設置
@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, ) ) ]; }
上部バーの右に2つボタンを設置
actionsを以下のように変更。 actions: <Widget>[ IconButton( icon: Icon(Icons.add), onPressed: () => setState(() { _count++; }), ), IconButton( icon: Icon(Icons.remove), onPressed: () => setState(() { _count--; }), ), ],
画面右下にボタンを表示
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), ), );