「Flutter/UI/Button」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「 ==body内にボタンを表示== body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ T...」) |
(→横幅いっぱいのボタン) |
||
| (同じ利用者による、間の8版が非表示) | |||
| 行1: | 行1: | ||
==body内にボタンを表示== | ==body内にボタンを表示== | ||
| + | テキストの下に灰色のボタン | ||
body: Center( | body: Center( | ||
child: Column( | child: Column( | ||
| 行18: | 行19: | ||
), | ), | ||
| − | == | + | ==上部中央に青いボタン== |
| − | + | <pre> | |
| − | + | 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: () { | |
| + | // 処理 | ||
| + | }, | ||
| + | ), | ||
| + | ], | ||
), | ), | ||
| − | + | ), | |
), | ), | ||
| − | + | </pre> | |
| − | + | ||
| − | onPressed:() { | + | ==ボタンレイアウト色々== |
| − | + | https://qiita.com/coka__01/items/30716f42e4a909334c9f | |
| − | + | ||
| − | + | ==横幅いっぱいのボタン== | |
| − | + | <pre> | |
| − | + | SizedBox( | |
| − | + | width: double.infinity, | |
| + | child: OutlineButton( | ||
| + | child: Text("ボタン1", | ||
| + | style: TextStyle( | ||
| + | locale: Locale("ja", "JP"), | ||
| + | ) | ||
| + | ), | ||
| + | onPressed: () { | ||
| + | // ボタン処理 | ||
| + | }, | ||
| + | splashColor: Colors.purple, | ||
| + | ), | ||
| + | ), | ||
| + | </pre> | ||
| + | |||
| + | ==丸ボタン== | ||
| + | <pre> | ||
| + | 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: () { | ||
| + | }, | ||
| + | ), | ||
| + | ) | ||
| + | </pre> | ||
2019年11月29日 (金) 16:56時点における最新版
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: () {
},
),
)
