[flutter] Iconly 라이브러리의 아이콘들을 앱의 버튼으로 활용하기

14 Dec 2023

flutter

Flutter 앱에서 아이콘을 사용하는 것은 사용자 경험을 향상시키는 데 중요합니다. Iconly 라이브러리는 700개가 넘는 아이콘을 제공하고 있으며, 이 아이콘들을 앱의 버튼으로 쉽게 활용할 수 있습니다.

Iconly 라이브러리 설치

먼저, pubspec.yaml 파일에 아래의 의존성을 추가합니다.

dependencies:
  iconly: ^1.0.0

의존성을 추가한 후에는 터미널에서 flutter pub get 명령어를 통해 라이브러리를 설치합니다.

Iconly 아이콘을 버튼으로 추가하기

아래의 예제 코드는 Iconly 라이브러리를 사용하여 앱의 버튼에 아이콘을 추가하는 방법을 보여줍니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Iconly 버튼 예제'),
        ),
        body: Center(
          child: RaisedButton.icon(
            onPressed: () {
              // 버튼 클릭 시 실행될 동작 정의
            },
            icon: Icon(IconlyLight.home), // Iconly 라이트 버전의 home 아이콘
            label: Text('홈으로 이동'), // 버튼 레이블
          ),
        ),
      ),
    );
  }
}

마무리

Iconly 라이브러리를 사용하여 Flutter 앱에 아이콘을 버튼으로 추가하는 방법에 대해 알아보았습니다. 이를 통해 앱의 사용자 경험을 향상시키고, 시각적 요소를 더욱 풍부하게 만들 수 있습니다.

더 많은 Iconly 아이콘 및 사용 방법에 대한 정보는 여기에서 확인할 수 있습니다.