flutter ボタンをコンポーネント化する

こんなボタンがあるとするやん？

                  child: OutlinedButton(
                    child: const Text('Start'),
                    style: OutlinedButton.styleFrom(
                      primary: Colors.black,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      side: const BorderSide(),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed("/a");
                    },
                  ),

デザインを使いまわしたいので、クラスにする

ボタンのラベルとタップ時の動作は呼び出し元で定義する

class TestButton extends StatelessWidget {
  final String label;
  final GestureTapCallback onPressed;

  TestButton({required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return
      OutlinedButton(
        child: Text(label),
        style: OutlinedButton.styleFrom(
          primary: Colors.black,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          side: const BorderSide(),
        ),
        onPressed: onPressed,
      );
  }
}

このように使う

                  child: TestButton(
                    label: "hello",
                    onPressed: () {
                      Navigator.of(context).pushNamed("/a");
                    },
                  ),

Related posts: