[flutter] cupertino_icons를 통해 아이콘의 뒷배경 설정하기

30 Nov 2023

flutter

Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 쉽게 사용할 수 있습니다. 하지만 기본적으로 제공되는 아이콘에는 뒷배경을 설정하는 옵션이 없습니다. 이번 글에서는 cupertino_icons를 사용하여 아이콘의 뒷배경을 설정하는 방법을 알아보겠습니다.

구현 방법

cupertino_icons 패키지는 iOS 스타일의 아이콘들을 미리 정의해 놓은 것입니다. 이 패키지의 아이콘을 사용하기 위해서는 먼저 pubspec.yaml 파일에 cupertino_icons 의존성을 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

그리고 pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

cupertino_icons 패키지에서 제공하는 아이콘은 기본적으로 배경이 투명하도록 디자인되어 있습니다. 따라서 아이콘의 배경을 설정하기 위해서는 Container 위젯과 같은 배경을 가진 위젯으로 아이콘을 감싸주어야 합니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino_icons.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('아이콘 설정 예제'),
      ),
      body: Center(
        child: Container(
          color: Colors.blue, // 배경색 설정
          child: CupertinoButton(
            padding: EdgeInsets.all(16),
            child: Icon(
              CupertinoIcons.home,
              color: Colors.white, // 아이콘 색상 설정
            ),
            onPressed: () {
              // 버튼 클릭 시 동작
            },
          ),
        ),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyPage(),
      theme: ThemeData(
        cupertinoOverrideTheme: CupertinoThemeData(
          brightness: Brightness.light,
        ),
      ),
    );
  }
}

위의 코드에서 Container 위젯을 사용하여 배경색을 설정하고, CupertinoButton 위젯으로 아이콘을 감싸주었습니다. 이 때, CupertinoButton 위젯의 color 속성을 통해 아이콘의 색상을 설정할 수 있습니다.