Flutterで四角のボタンを作る

Tips💡

Material3のデザインが適用されると、ボタンが角丸になってしまうようだ。普段使っている家計簿アプリや試しにインストールした学習アプリは、角が四角で、画面の端まで伸びているデザインだった。このボタンを作りたいと思った。

どうすればいいんだ😅

SizedBoxで、ElevatedButtonをラップして、横幅を画面最大まで伸ばすdouble.infinityを指定して、shapeプロパティで、BorderRadius.circular(0)を指定すれば普段使っているAndroidアプリのボタンデザインにすることができた。

SizedBox(
      width: double.infinity,
      child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(0),
            ),
            backgroundColor: Colors.blue[300],
          ),
          onPressed: () {},
          child: const Text(
            'ログイン',
            style: TextStyle(color: Colors.white),
          ))),

コンポーネント化したい場合はこのように書く

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class SquareButton extends HookConsumerWidget {
  const SquareButton({
    super.key,
    required this.buttonTitle,
    required this.buttonColor,
    required this.textColor,
    required this.fontSize,
    required this.onPressed,
  });

  final String buttonTitle;
  final Color buttonColor;
  final Color textColor;
  final double fontSize;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return SizedBox(
          width: double.infinity,
          child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(0),
                ),
                backgroundColor: buttonColor,
              ),
              onPressed: onPressed,
              child: Text(
                buttonTitle,
                style: TextStyle(color: textColor, fontSize: fontSize),
              )));
  }
}

[これは見本です]

まとめ

今回は、角が四角で画面端まで伸びているボタンを作ってみました。角が四角で端っこまで伸びてるボタンが欲しい人は参考にしてみてください。