SNSのシャッターボタンを再現

はじめに

カメラで使用するシャッターボタンをSNSを参考に再現する。
今回再現するものはTwitterとInstagram

Default	Twitter	Instagram

TL;DR

• TextButtonを使用
• styleを指定
  • 枠線はsideを指定
  • 形状はshapeにCircleBorderを指定

デフォルト

白色の枠線，塗りつぶしはなし(カメラ画像，背景色)のボタン

class ShutterButtonDefault extends StatelessWidget {
  final Function()? onPressed;

  const ShutterButtonDefault({
    super.key,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    const double size = 64.0;

    return TextButton(
      style: TextButton.styleFrom(
        fixedSize: const Size(size, size),
        side: const BorderSide(
          color: Colors.white,
          width: 4.0,
        ),
        shape: const CircleBorder(),
      ),
      onPressed: onPressed,
      child: const SizedBox(),
    );
  }
}

• TextButtonはchildが必須でありnull許容ではないため，空ウィジェットSizedBox()を指定
• styleの指定する際にTextButton.styleFromを使用することで変更する項目のみ指定すればよい
  • fixedSize: ボタンのサイズを指定
  • side: CircleBorderで枠線を指定
  • shape: CircleBorderで形状を指定

Twitter

白色の枠線，塗りつぶしは少し透過率のあるボタン

class ShutterButtonTwitter extends StatelessWidget {
  final Function()? onPressed;

  const ShutterButtonTwitter({
    super.key,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    const double size = 64.0;

    return TextButton(
      style: TextButton.styleFrom(
        backgroundColor: Colors.white70,
        fixedSize: const Size(size, size),
        side: const BorderSide(
          color: Colors.white,
          width: 4.0,
        ),
        shape: const CircleBorder(),
      ),
      onPressed: onPressed,
      child: const SizedBox(),
    );
  }
}

• デフォルトにbackgroundColorを追加
  • backgroundColor: ボタンの色を指定
  • Colors.white70: 透過率30%(不透過率70%)の白色を指定

Instagram

白色の枠線，塗りつぶしはなし(カメラ画像，背景色)の空間が少し，白色の丸の丸ボタン

class ShutterButtonInstagram extends StatelessWidget {
  final Function()? onPressed;

  const ShutterButtonInstagram({
    super.key,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    const double size = 64.0;

    return OutlinedButton(
      style: TextButton.styleFrom(
        padding: const EdgeInsets.all(0.0),
        fixedSize: const Size(size, size),
        side: const BorderSide(
          color: Colors.white,
          width: 4.0,
        ),
        shape: const CircleBorder(),
      ),
      onPressed: onPressed,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

• TextButtonにはデフォルトでpaddingが設定されているためstyleでEdgeInsets.all(0.0)を指定
• childに枠線の内側を作成
  • paddingを指定して透明の空間を作成
  • ContainerにBoxDecorationを指定して白丸を作成

白丸の部分はCircleAvatarやCustomPainterを使用しても再現が可能

参考文献

• Flutter 公式ドキュメント
• [Flutter]コピペで使える！ボタンのデザイン16種類をまとめました
• FlutterでiPhoneのカメラのシャッターボタンみたいなやつを作る