「Flutter/UI/Button」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→body内にボタンを表示) |
(→横幅いっぱいのボタン) |
||
(同じ利用者による、間の4版が非表示) | |||
行40: | 行40: | ||
</pre> | </pre> | ||
− | == | + | ==ボタンレイアウト色々== |
− | + | https://qiita.com/coka__01/items/30716f42e4a909334c9f | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | ==横幅いっぱいのボタン== | ||
<pre> | <pre> | ||
− | + | SizedBox( | |
− | + | width: double.infinity, | |
− | + | child: OutlineButton( | |
− | + | child: Text("ボタン1", | |
− | + | style: TextStyle( | |
− | + | locale: Locale("ja", "JP"), | |
− | + | ) | |
− | + | ), | |
− | + | onPressed: () { | |
− | + | // ボタン処理 | |
− | + | }, | |
− | + | splashColor: Colors.purple, | |
− | + | ), | |
− | + | ), | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</pre> | </pre> | ||
− | === | + | ==丸ボタン== |
− | + | ||
<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> | </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: () { }, ), )