[flutter] cupertino_icons를 통해 아이콘의 배치 및 정렬 조정하기

30 Nov 2023

flutter

Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 사용할 수 있습니다. 이 패키지를 사용하면 아이콘을 화면에 표시하고 배치 및 정렬을 조정할 수 있습니다. 이번 포스트에서는 cupertino_icons를 활용하여 아이콘의 배치와 정렬에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 이를 위해 다음의 코드를 dependencies 섹션에 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

pubspec.yaml 파일을 저장한 후, 실행 중인 Flutter 프로젝트에서 패키지를 가져오기 위해 다음 명령어를 실행하세요:

flutter pub get

이제 cupertino_icons 패키지를 사용할 준비가 되었습니다.

아이콘 표시하기

먼저, 아이콘을 화면에 표시해보겠습니다. Flutter의 Icon 위젯을 사용하여 이를 구현할 수 있습니다. 다음은 CupertinoIcons 클래스로부터 어떤 아이콘을 사용할지 선택한 예제입니다.

import 'package:flutter/cupertino.dart';

class IconPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Page'),
      ),
      body: Center(
        child: Icon(
          CupertinoIcons.heart,
          size: 64,
          color: Colors.red,
        ),
      ),
    );
  }
}

위 예제에서 Center 위젯 내부에 Icon 위젯을 사용하여 CupertinoIcons.heart 아이콘을 표시합니다. size와 color 속성을 사용하여 아이콘의 크기와 색상을 지정할 수 있습니다.

아이콘 배치 및 정렬하기

아이콘을 배치하고 정렬하기 위해서는 해당 위젯을 적절한 위치에 배치하고, Align 또는 Positioned와 같은 위젯을 사용하여 정렬할 수 있습니다. 다음은 아이콘을 중앙에 배치하고 화면 하단 가운데에 정렬하는 예제입니다.

import 'package:flutter/cupertino.dart';

class IconPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Page'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: 12,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Icon(
                CupertinoIcons.heart,
                size: 64,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 예제에서는 Stack을 사용하여 화면 상에 위젯을 겹쳐서 배치합니다. 그리고 Positioned와 Align 위젯을 사용하여 아이콘을 화면 하단 가운데에 정렬합니다.

결론

Flutter에서 cupertino_icons 패키지를 사용하면 iOS 스타일의 아이콘을 쉽게 화면에 표시하고 배치 및 정렬을 조정할 수 있습니다. 이번 포스트에서는 cupertino_icons 패키지를 추가하고 아이콘을 표시하는 방법과 배치 및 정렬하는 방법을 알아보았습니다. 이를 참고하여 Flutter 애플리케이션에서 아이콘을 사용해보세요.

참고 자료

cupertino_icons 패키지 - Pub.dev