[Flutter] IconButton 위젯 배경색을 커스터마이징 하는 방법 4가지

---

기본 IconButton 사용

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('배경색 적용하기 전', textAlign: TextAlign.center),
              IconButton(onPressed: () {}, icon: const Icon(Icons.search)),
              const SizedBox(height: 30),
            ],
          ),
        ),
      ),
    );
  }
}

이제 각각의 방법들을 Column의 childeren 안에 넣겠습니다.

 

방법1. Container

             Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.search),
                ),
              ),

IconButton을 Container로 감싸고,

Container의 Color를 변경합니다.

 

방법2. Ink

              Ink(
                decoration: const ShapeDecoration(
                  shape: CircleBorder(),
                  color: Colors.blue,
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.search),
                ),
              ),

IconButton을 Ink로 감싸고,

Ink의 Color를 변경합니다.

 

참고로, Flutter 공식문서에서는 이 방법을 사용하고 있습니다.

https://api.flutter.dev/flutter/material/IconButton-class.html#material.IconButton.2

 

방법3. useMaterial3, styleForm

이 방법은 상단의 MaterialApp도 건드려줘야합니다.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true), // 이걸 추가해줘야 합니다.
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [ // 다른 위젯 생략
            
              IconButton(
                onPressed: () {},
                style: IconButton.styleFrom(backgroundColor: Colors.green),
                icon: const Icon(Icons.search),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

아래의 코드가 있어야만 배경색을 지정할수 있습니다.

theme: ThemeData(useMaterial3: true),

이 방법 역시 Flutter 공식문서에 소개된 방법입니다.

https://api.flutter.dev/flutter/material/IconButton-class.html#material.IconButton.3

 

방법4. ButtonStyle, MaterialStateProperty

              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.search),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.yellow),
                ),
              )

 

방법 1, 2는 다른 곳에서도 많이 쓰이는 Container, Ink 위젯을 사용했기 때문에

단순히 색깔만 바꾸는 것이 아니라 모양, 기타 등등의 효과를 적용하기에 유리합니다.

 

방법  3, 4는 다른 위젯을 사용할 필요 없이 IconButton 내부에서 해결하는 방법이기 때문에

상대적으로 간편합니다.

 

 

종합

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('배경색 적용하기 전', textAlign: TextAlign.center),
              IconButton(onPressed: () {}, icon: const Icon(Icons.search)),
              const SizedBox(height: 30),
              
              const Text('배경색 적용 방법1 \n Container', textAlign: TextAlign.center),
              Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.search),
                ),
              ),
              const SizedBox(height: 30),
              
              const Text('배경색 적용 방법2 \n Ink', textAlign: TextAlign.center),
              Ink(
                decoration: const ShapeDecoration(
                  shape: CircleBorder(),
                  color: Colors.blue,
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.search),
                ),
              ),
              const SizedBox(height: 30),
              
              const Text('배경색 적용 방법3 \n useMaterial3, styleForm', textAlign: TextAlign.center),
              IconButton(
                onPressed: () {},
                style: IconButton.styleFrom(backgroundColor: Colors.green),
                icon: const Icon(Icons.search),
              ),
              const SizedBox(height: 30),
              
              const Text('배경색 적용 방법4 \n ButtonStyle, MaterialStateProperty', textAlign: TextAlign.center),
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.search),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.yellow),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}