[Flutter] 커스텀 버튼들 클래스를 만들어 재사용하는 방법

1️⃣ page_object.dart 파일 생성 및 버튼 클래스 추가

 

프로젝트 구조 예시:

lib/
 ├── main.dart
 ├── pages/
 │    ├── home_page.dart  (버튼을 사용하는 페이지)
 │    ├── login_page.dart (버튼을 사용하는 페이지)
 ├── widgets/
 │    ├── page_object.dart  (공통 버튼 정의)

 

🔧 lib/widgets/page_object.dart

import 'package:flutter/material.dart';

/// 구글 로그인 버튼
class GoogleSignInBtn extends StatelessWidget {
  final VoidCallback onPressed;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Image.asset(
        'assets/images/google_signin_button.png',
        height: 50,
      ),
    );
  }
}

/// 애플 로그인 버튼
class AppleSignInBtn extends StatelessWidget {
  final VoidCallback onPressed;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Image.asset(
        'assets/images/apple_signin_button.png',
        height: 50,
      ),
    );
  }
}

/// GitHub 로그인 버튼
class GitHubSignInBtn extends StatelessWidget {
  final VoidCallback onPressed;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Image.asset(
        'assets/images/github_signin_button.png',
        height: 50,
      ),
    );
  }
}

 

✅ 각 버튼을 StatelessWidget 클래스로 만들어 재사용 가능하도록 구성

✅ 각 버튼의 클릭 이벤트를 onPressed 매개변수로 전달

---

2️⃣ 버튼을 다른 페이지에서 사용하기

 

이제 home_page.dart 또는 login_page.dart 같은 페이지에서 버튼을 가져와 사용할 수 있습니다.

 

🔧 예제: lib/pages/login_page.dart

import 'package:flutter/material.dart';
import '../widgets/page_object.dart'; // 버튼 클래스를 import

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("로그인 페이지")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GoogleSignInBtn(
              onPressed: () {
                print("Google 로그인 버튼 클릭됨!");
              },
            ),
            const SizedBox(height: 16),
            AppleSignInBtn(
              onPressed: () {
                print("Apple 로그인 버튼 클릭됨!");
              },
            ),
            const SizedBox(height: 16),
            GitHubSignInBtn(
              onPressed: () {
                print("GitHub 로그인 버튼 클릭됨!");
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

🚀 최종 정리

 

1️⃣ lib/widgets/page_object.dart 파일을 만들어 공통 버튼 클래스를 정의

2️⃣ GestureDetector를 활용하여 터치 이벤트를 onPressed로 처리

3️⃣ lib/pages/login_page.dart에서 import하여 필요할 때 사용