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("本文")
);
