Flutter/UI/Button
提供: 初心者エンジニアの簡易メモ
body内にボタンを表示
テキストの下に灰色のボタン
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'hello',
),
RaisedButton(
child: Text('button1'),
onPressed: () {
// ボタン処理
},
),
],
),
),
上部中央に青いボタン
Container(
padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 72.0)
+ MediaQuery.of(context).padding,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton.filled(
child: const Text('ボタン'),
onPressed: () {
// 処理
},
),
],
),
),
),
ボタンレイアウト色々
https://qiita.com/coka__01/items/30716f42e4a909334c9f
横幅いっぱいのボタン
SizedBox(
width: double.infinity,
child: OutlineButton(
child: Text("ボタン1",
style: TextStyle(
locale: Locale("ja", "JP"),
)
),
onPressed: () {
// ボタン処理
},
splashColor: Colors.purple,
),
),
丸ボタン
Container(
padding: EdgeInsets.all(0.0),
width: 80,
height: 80,
child: RaisedButton(
child: Text("1" ,style: TextStyle(fontSize: 50.0)),
color: Colors.white,
shape: CircleBorder(
side: BorderSide(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid,
),
),
onPressed: () {
},
),
)
