[flutter] cupertino_icons를 사용하여 아이콘 위치 조정하기

30 Nov 2023

flutter

Flutter에서 아이콘을 사용할 때, cupertino_icons 패키지를 통해 iOS 스타일의 아이콘을 쉽게 사용할 수 있습니다. cupertino_icons 패키지는 Flutter에 기본으로 포함되어 있으므로 따로 설치할 필요가 없습니다.

아이콘의 위치를 조정하기 위해서는 Container 위젯을 사용하여 아이콘을 감싸고 alignment 속성을 이용하여 위치를 조정할 수 있습니다. 다음은 cupertino_icons 패키지에서 제공되는 아이콘을 사용하여 아이콘 위치를 조정하는 간단한 예시입니다.

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

class IconAlignmentExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Icon Alignment Example'),
      ),
      child: SafeArea(
        child: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Align(
              alignment: Alignment.center,
              child: Icon(
                CupertinoIcons.arrow_up,
                size: 100,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 Container 위젯을 사용하여 크기가 200x200인 파란색 박스를 생성하고, 그 안에 Align 위젯을 사용하여 아이콘을 가운데로 정렬하고 있습니다. Align 위젯의 alignment 속성을 Alignment.center로 설정하여 아이콘을 중앙에 배치하였습니다.

결과는 다음과 같습니다:

아이콘 위치 조정 예시

위의 예시를 참고하여, cupertino_icons 패키지를 사용하여 Flutter 애플리케이션에서 원하는 아이콘을 위치 조정할 수 있습니다.

더 많은 아이콘에 대한 정보는 다음의 링크를 참고하세요: