[flutter] 아이콘의 재료 디자인 스타일 적용하는 방법

22 Dec 2023

많은 앱에서는 아이콘에 재료(Material) 디자인 스타일을 적용하여 모던하고 일관된 UI를 제공합니다. Flutter를 사용하여 앱을 개발하는 경우, 아이콘에 재료 디자인 스타일을 쉽게 적용할 수 있습니다.

이 게시물에서는 Flutter 앱에서 아이콘에 Material 디자인 스타일을 적용하는 방법을 다루겠습니다.

1. Material 아이콘 사용하기

먼저, Flutter 프로젝트에서 Material 아이콘을 사용하려면 pubspec.yaml 파일에 다음과 같이 flutter_icons 패키지를 추가합니다.

dependencies:
  flutter_icons: ^1.1.0

이제, 아이콘을 사용하기 위해 pubspec.yaml 파일에 해당 패키지를 추가했으니, 아이콘을 사용할 화면에서 해당 아이콘을 import 합니다.

예를 들어, Icons.home을 사용하여 홈 아이콘을 추가할 수 있습니다.

아이콘의 색상 및 크기를 지정하기 위해 Icon 위젯을 사용합니다.

아래 예제를 통해, Icons.home 아이콘을 초록색으로 지정하고, 크기를 40으로 설정하는 방법을 보여드리겠습니다.

Icon(
  Icons.home,
  color: Colors.green,
  size: 40,
)

어떤 경우에는 아이콘을 클릭 가능한 버튼으로 만들어야 합니다. 이를 위해 IconButton 위젯을 사용할 수 있습니다.

예를 들어, Icons.settings 아이콘을 추가하고, 클릭했을 때 특정 동작을 수행하도록 설정할 수 있습니다.

IconButton(
  icon: Icon(Icons.settings),
  onPressed: () {
    // 버튼 클릭 시 수행될 작업
  },
)

위의 단계를 따라하면, Flutter 앱에서 아이콘에 Material 디자인 스타일을 적용할 수 있습니다.

이제, 모던하고 일관된 UI를 제공하는 아이콘을 쉽게 구현할 수 있게 되었습니다.

그럼, 즐거운 개발 되세요!