[flutter] 플러터 앱에 다양한 아이콘 배치하기

14 Dec 2023

flutter

플러터(Flutter)를 사용하여 다양한 아이콘을 앱에 배치하는 방법을 알아보겠습니다.

1. Material Design 아이콘 사용하기

Material Design은 플러터 앱에서 아이콘을 쉽게 사용할 수 있도록 해줍니다. 다음은 Material Design 아이콘을 사용하는 방법입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('아이콘 예제'),
        ),
        body: Center(
          child: Icon(
            Icons.favorite,
            size: 50.0,
            color: Colors.red,
          ),
        ),
      ),
    ),
  );
}

위의 코드에서 Icons.favorite는 Material Design 아이콘 중 하나를 가리키며, size와 color 속성을 조절하여 아이콘의 크기와 색상을 변경할 수 있습니다.

2. 커스텀 아이콘 사용하기

플러터 앱에서는 커스텀 아이콘을 사용할 수도 있습니다. 먼저, 사용할 이미지 파일을 준비하고 pubspec.yaml 파일에 아이콘을 등록해야 합니다.

flutter:
  uses-material-design: true
  assets:
    - images/custom_icon.png

그 다음, 아이콘을 Image 위젯으로 표현할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('커스텀 아이콘 예제'),
        ),
        body: Center(
          child: Image.asset('images/custom_icon.png', width: 100, height: 100),
        ),
      ),
    ),
  );
}

위의 코드에서 Image.asset 위젯을 사용하여 프로젝트에 추가된 커스텀 아이콘을 표시합니다.

결론

플러터를 사용하면 Material Design의 아이콘을 쉽게 활용하거나, 직접 만든 커스텀 아이콘을 앱에 쉽게 배치할 수 있습니다. 각각의 아이콘은 앱 디자인에 걸맞게 활용하여 사용자들에게 더 나은 경험을 제공할 수 있습니다.