どうも、ちょげ(@chogetarou)です。
画面の下部分にボタンを表示する方法を紹介します。
方法
画面の下部にボタンを表示するには、「Align」ウェジェットを使います。
まず、ボタンをAlignウェジェットの「child」に指定します。
そして、Alignウェジェットの引数「alignment」に、「Alignment.bottomCenter」を指定します。
body: Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
child: Text('Button'),
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size(250, 50),
),
),
)
もし、ボタンを下部分に固定したいならば「Stackウェジェット」を使いましょう。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
color: Colors.green,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
child: Text('Button'),
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size(250, 50),
),
),
),
),
],
),
);
}
コメント