[Flutter] PNG 이미지를 버튼으로 추가하는 방법

1️⃣ assets 폴더에 이미지 추가

1. 프로젝트의 assets 폴더에 다운로드한 PNG 이미지를 넣습니다.

• 예: assets/images/google_signin_button.png

2. pubspec.yaml에서 assets 경로를 추가합니다.

 

✅ pubspec.yaml 수정

flutter:
  assets:
    - assets/images/google_signin_button.png

 

⚠️ 주의:

• assets: 들여쓰기(공백 2칸) 유지

• flutter clean && flutter pub get 실행하여 변경 사항 반영

---

2️⃣ 구글 로그인 버튼 추가

 

🔧 방법 1: GestureDetector로 터치 이벤트 감지

import 'package:flutter/material.dart';

class GoogleSignInButton extends StatelessWidget {
  final VoidCallback onPressed;

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Image.asset(
        'assets/images/google_signin_button.png', // 다운로드한 PNG 이미지 경로
        height: 50, // 버튼 크기 조정 가능
      ),
    );
  }
}

---

🔧 방법 2: ElevatedButton과 Image.asset 사용

ElevatedButton(
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.zero, // 버튼 내부 패딩 제거
    backgroundColor: Colors.transparent, // 배경색 제거
    shadowColor: Colors.transparent, // 그림자 제거
  ),
  onPressed: () {
    // 로그인 로직 실행
  },
  child: Image.asset(
    'assets/images/google_signin_button.png',
    height: 50,
  ),
)

---

3️⃣ 로그인 버튼 사용 예제

 

아래 코드처럼 화면에 버튼을 추가할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GoogleSignInButton(
            onPressed: () {
              print("Google 로그인 버튼 클릭됨!");
            },
          ),
        ),
      ),
    );
  }
}

class GoogleSignInButton extends StatelessWidget {
  final VoidCallback onPressed;

  const GoogleSignInButton({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,
      ),
    );
  }
}

 

🚀 최종 정리

 

1️⃣ assets/images/ 폴더에 구글 로그인 PNG 파일 추가

2️⃣ pubspec.yaml에서 assets 경로 등록 후 flutter pub get 실행

3️⃣ Image.asset('assets/images/google_signin_button.png')로 버튼 생성

4️⃣ GestureDetector 또는 ElevatedButton을 사용하여 터치 이벤트 추가