【Flutter】各種ボタンとカスタマイズ方法まとめ【コピペ用】

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