Flutter에서는 cupertino_icons 패키지를 통해 iOS 스타일의 아이콘을 쉽게 사용할 수 있습니다. 하지만 때로는 이 아이콘들을 이미지 파일로 저장해야 할 때가 있을 수 있습니다. 이번 포스트에서는 cupertino_icons 패키지를 사용하여 생성된 아이콘을 이미지로 저장하는 방법에 대해 알아보겠습니다.

필수 패키지 설치

가장 먼저, flutter 프로젝트의 pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 다음의 코드를 dependencies 섹션에 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이제 패키지를 설치하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

아이콘을 이미지로 저장하기

1. pubspec.yaml 파일에서 cupertino_icons 패키지를 추가한 뒤, 아이콘을 사용하려는 위젯에서 Icon 위젯을 생성합니다. 예를 들어, 다음과 같이 작성해보겠습니다:

    import 'package:cupertino_icons/cupertino_icons.dart';
    import 'package:flutter/material.dart';
   
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Icon to Image'),
          ),
          body: Center(
            child: Icon(
              CupertinoIcons.home,
              size: 100,
              color: Colors.blue,
            ),
          ),
        );
      }
    }
   

   위 예제에서는 CupertinoIcons.home 아이콘을 사용하여 크기가 100이고 파란색인 아이콘을 생성하고 있습니다.

2. 이제 아이콘을 이미지로 저장하기 위해 repaintBoundary 위젯을 사용합니다. repaintBoundary 위젯은 자식 위젯을 이미지로 렌더링하는 역할을 합니다. 위의 예제 코드를 다음과 같이 수정해주세요:

    import 'dart:ui' as ui;
    import 'package:flutter/rendering.dart';
   
    class MyHomePage extends StatelessWidget {
      GlobalKey _globalKey = GlobalKey();
   
      Future<Uint8List> _capturePng() async {
        RenderRepaintBoundary boundary =
            _globalKey.currentContext.findRenderObject();
        ui.Image image = await boundary.toImage(pixelRatio: 2.0);
        ByteData byteData =
            await image.toByteData(format: ui.ImageByteFormat.png);
        return byteData.buffer.asUint8List();
      }
   
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Icon to Image'),
          ),
          body: RepaintBoundary(
            key: _globalKey,
            child: Center(
              child: Icon(
                CupertinoIcons.home,
                size: 100,
                color: Colors.blue,
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              Uint8List pngBytes = await _capturePng();
              // 이제 여기서 pngBytes를 파일로 저장하거나 다른 곳에 활용할 수 있습니다.
            },
            child: Icon(Icons.save),
          ),
        );
      }
    }
   

   위의 코드에서는 _capturePng 메소드를 통해 현재 화면의 이미지를 캡처합니다. toImage 메소드는 렌더링된 위젯을 ui.Image 객체로 변환하고, toByteData 메소드를 통해 ByteData 객체로 변환합니다. 마지막으로 asUint8List 메소드를 사용하여 이미지 데이터를 Uint8List로 변환합니다.

3. floatingActionButton을 누르면 _capturePng 메소드가 호출되어 이미지를 캡처하고, 이제 이 데이터를 파일로 저장하거나 다른 곳에 활용할 수 있습니다.

마무리

이번 포스트에서는 cupertino_icons 패키지를 사용하여 생성된 아이콘을 이미지로 저장하는 방법에 대해 알아보았습니다. 위의 예제를 활용하여 원하는 아이콘을 이미지로 저장하고, 필요에 따라 다른 곳에서 활용할 수 있습니다.

관련 참고링크:

• cupertino_icons 패키지