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: () { }, ), )