[flutter] cupertino_icons를 통해 아이콘 배경색 변경하기

30 Nov 2023

flutter

Cupertino 아이콘은 Flutter에서 iOS 스타일의 아이콘을 표시하기 위해 사용됩니다. cupertino_icons 패키지를 설치하여 Flutter 앱에서 Cupertino 아이콘을 사용할 수 있습니다.

1. cupertino_icons 패키지 추가

먼저, pubspec.yaml 파일을 열고 dependencies 섹션에 cupertino_icons를 추가해야 합니다. 아래와 같이 작성하세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

저장한 후에는 터미널에서 flutter pub get 명령어를 사용하여 패키지를 가져옵니다.

2. 아이콘 배경색 변경하기

Cupertino 아이콘의 배경색을 변경하기 위해 아이콘을 Container 위젯 내부에 배치하고 BoxDecoration을 사용하여 배경색을 설정합니다.

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

class IconPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Example'),
      ),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: Colors.blue, // 배경색 설정
            borderRadius: BorderRadius.circular(50), // 동그란 모서리 설정
          ),
          child: Icon(
            CupertinoIcons.add, // Cupertino 아이콘 사용
            color: Colors.white, // 아이콘 색상 설정
            size: 60, // 아이콘 크기 설정
          ),
        ),
      ),
    );
  }
}

위의 예시 코드는 Cupertino 아이콘을 사용하여 동그란 배경색이 있는 아이콘을 만들어줍니다.

3. 실행하기

이제 앱을 실행하여 결과를 확인할 수 있습니다. ‘flutter run’ 명령어를 사용하거나 Flutter IDE를 통해 실행하세요.

flutter run

위의 예시 코드를 실행하면 iOS 스타일의 아이콘과 배경색이 있는 원이 화면에 나타납니다.

이제 flutter에서 cupertino_icons를 사용하여 아이콘 배경색을 변경하는 방법에 대해 알게 되었습니다. 추가적인 정보는 cupertino_icons 패키지 문서를 참조해주세요.