Flutter/UI/Scaffold
提供: 初心者エンジニアの簡易メモ
上部バーの右にボタンを設置
@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), ), );
Barを透明に
extendBodyBehindAppBar: true を追加して、 backgroundColorを Colors.blue.withOpacity(0.3),のようにする。
Scaffold( appBar: AppBar( backgroundColor: Colors.blue.withOpacity(0.3), title: Text("タイトル", style: TextStyle( fontSize: 16, locale: Locale("ja", "JP") ) ), ), extendBodyBehindAppBar: true, body: Text("本文") );