【Flutter】丸いElevatedButtonの実装

作るもの

実装

ElevatedButtonのプロパティstyleでボタンのスタイルを変更する。
丸い形は、ButtonStyleクラスのshapeプロパティに対してCircleBorderをMaterialStateProperty.allメソッドで設定する。

MaterialStatePropertyについてはこちらの記事でも紹介しているので参考にしてください。

CircleButton.dart

import 'package:flutter/material.dart';

class CircleButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
      style: ButtonStyle(
        minimumSize: MaterialStateProperty.all<Size>(Size(60, 60)),
        shape: MaterialStateProperty.all<CircleBorder>(CircleBorder(
          side: BorderSide(
            color: Colors.black,
            width: 1,
            style: BorderStyle.solid,
          ),
        )),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
        elevation: MaterialStateProperty.all<double>(4.0),
      ),
    );
  }
}