ボタンを個別のファイルに分けてコンポーネント化する [Flutter]

要点

• ボタンを定義する際、 onPressed の処理を渡せるようにするためにGestureTapCallback を使う

例：

login_button.dart

import 'package:sample_app/ui/atoms/app_text.dart';
import 'package:flutter/material.dart';

class LoginButton extends StatelessWidget {
  final GestureTapCallback onPressed;
  const LoginButton({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      child: AppText.loginButtonText,
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        shape: const StadiumBorder(),
        side: const BorderSide(color: Colors.white),
      ),
      onPressed: () {
        debugPrint('Pressed LoginButton');
        onPressed();
        debugPrint('Completed onPressed() of LoginButton');
      },
    );
  }
}

呼び出す側: signup_page.dart

class SignupPage extends StatelessWidget {
  void keyboardArrowDownButtonEvent() {}

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: AppColors.signupWidgetBackground,
        body: Stack(
          children: [
            Align(
              alignment: const Alignment(1, -1),
              child: Padding(
                padding: Measure.paddingTopRight,
                child: LoginButton(onPressed: () {
                  Navigator.of(context).push<dynamic>(
                    HomePage.route(),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参考

• flutter ボタンをコンポーネント化する | おゆばぶ
  • ただし、この記事では修正が必要： onPressed: onPressed → onPressed: onPressed()