「Flutter/UI/Scaffold」の版間の差分
ナビゲーションに移動
検索に移動
細 Admin がページ「Flutter/UI/上部Button」を「Flutter/UI/Scaffold」に移動しました |
編集の要約なし |
||
| 45行目: | 45行目: | ||
} | } | ||
</pre> | </pre> | ||
==画面右下にボタンを表示== | |||
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), | |||
), | |||
); | |||
2019年11月16日 (土) 08:24時点における版
上部バーの右にボタンを設置
@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,
)
)
];
}
画面右下にボタンを表示
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),
),
);