Flutter に用意されている各種ボタンウィジェットと、ボタンの見た目をカスタマイズするコードをまとめてみました。(コピペ用なのでほぼコードです)
各種ボタンウィジェット
RaisedButton

RaisedButton(
child: Text('Raised Button'),
onPressed: () {},
),
OutlineButton

OutlineButton(
child: Text('Outline Button'),
onPressed: () {},
),
FlatButton

FlatButton(
child: Text('Flat Button'),
onPressed: () {},
),
IconButton

IconButton(
icon: Icon(Icons.volume_up),
tooltip: 'Increase volume by 10',
onPressed: () {},
),
DropdownButton

DropdownButton(
value: _dropdownValue,
onChanged: (String value) {
setState(() {
_dropdownValue = value;
});
},
items: <String>['One', 'Two', 'Three'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
PopupMenuButton

PopupMenuButton<String>(
onSelected: (String value) {
_popupMenuValue = value;
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: "1",
child: Text('One'),
),
const PopupMenuItem<String>(
value: "2",
child: Text('Two'),
),
const PopupMenuItem<String>(
value: "3",
child: Text('Three'),
),
],
),
FloatingActionButton

FloatingActionButton(
tooltip: 'Action!',
child: Icon(Icons.add), // Text()でもOK
onPressed: () {},
),
// テキストとアイコンの横長ボタンの場合
FloatingActionButton.extended(
tooltip: 'Action!',
icon: Icon(Icons.add), //アイコンは無しでもOK
label: Text('Add'),
onPressed: () {},
),
ボタンのカスタマイズ
角丸のボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
両サイド丸のボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: StadiumBorder(),
),
完全に丸のボタン

RaisedButton(
onPressed: () {},
child: Text('B'),
shape: CircleBorder(),
),
面取りのボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
アウトライン(外枠)のボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
),
アンダーライン(下線)のボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: UnderlineInputBorder(),
),
四辺に個別ラインのボタン

RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
shape: Border(
top: BorderSide(color: Colors.red),
left: BorderSide(color: Colors.red, width: 5),
right: BorderSide(color: Colors.green, width: 5),
bottom: BorderSide(color: Colors.green),
),
),
グラデーションのボタン

RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Colors.green.shade300,
Colors.green.shade500,
Colors.green.shade700,
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text('Raised Button'),
),
),
アイコン付きのボタン

RaisedButton.icon(
icon: Icon(Icons.access_alarm),
label: Text("Raised Button"),
onPressed: () {},
),
影の位置を変えたボタン

RaisedButton(
elevation: 6.0,
child: Text("Raised Button"),
onPressed: () {},
),
コメント