(Flutter-기초 강의) 11. Assets 관리 (Fonts, Images, Icons)

폰트, 이미지, 아이콘과 같은 Asset들을 효과적으로 관리하는 것은 시각적으로 매력적이고 원활한 사용자 경험을 만드는 데 필수적입니다.

Flutter는 이러한 Asset을 애플리케이션에 통합하는 데 효율적이고 간편한 방법을 제공합니다.

Flutter에서 Asset

개요

Asset이란 애플리케이션이 런타임에 접근할 필요가 있는 파일들을 말합니다.

이에는 정적 데이터(예: JSON 파일), 설정 파일, 아이콘, 이미지 등이 포함됩니다.

Asset 선언하기

Asset을 관리하려면 Flutter 프로젝트의 루트에 위치한 pubspec.yaml 파일에서 Asset을 선언해야 합니다.

Asset을 선언하는 기본 구조는 다음과 같습니다:

예제

본 포스팅에서 진행되는 예제에서 asset들은 다음과 같이 Root 폴더 하위에 assets 폴더 구조로 관리될 예정입니다.

├── assets
│  ├── fonts
│  ├── icons
│  └── images

pubspec.yaml

flutter:
  assets:
    - assets/images/a_dot_burr.jpeg
    - assets/images/a_dot_ham.jpeg

폰트 관리하기

개요

Flutter 프로젝트에 폰트를 추가하고 pubspec.yaml에 선언하여 관리할 수 있습니다.

Google fonts 에서 폰트 다운로드

Google Fonts 웹 사이트에서 원하는 폰트를 다운받아 사용할 수 있습니다.

1. 사이드 패널의 사용하고자 하는 언어 등 의 조건을 선택하여 필터링 한 후 원하는 폰트를 선택합니다.

2. 해당 폰트의 원하는 스타일을 ‘Select this style’을 클릭하여 선택 한 후 Download 버튼을 눌러 다운로드 합니다.

다운 받은 폰트 사용하기

1. 압축을 해제 하고 폰트 파일(*.ttf)을 assets/fonts 폴더에 위치시킵니다.

2. pubspec.yaml에 다운 받은 폰트를 추가합니다.

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/roboto/Roboto-Regular.ttf
        - asset: assets/fonts/roboto/Roboto-Italic.ttf
        - asset: assets/fonts/roboto/Roboto-Bold.ttf
          weight: 700

3. 다음과 같이 추가한 폰트를 사용합니다.

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Roboto Font - Regular',
              style: TextStyle(
                fontFamily: 'Roboto',
                fontSize: 24,
              ),
            ),
            Text(
              'Roboto Font - Italic',
              style: TextStyle(
                fontFamily: 'Roboto',
                fontStyle: FontStyle.italic,
                fontSize: 24,
              ),
            ),
            Text(
              'Roboto Font - Bold',
              style: TextStyle(
                fontFamily: 'Roboto',
                fontWeight: FontWeight.bold,
                fontSize: 24,
              ),
            ),
          ],
        ),

결과

이미지 관리하기

Flutter 프로젝트에 이미지를 추가하고 pubspec.yaml에 선언하여 관리할 수 있습니다.

Image class (공식 문서)

Image 클래스는 애플리케이션에 이미지를 표시하는 데 사용되는 Widget입니다.

이미지를 로드하고, 조정하며, 화면에 표시할 수 있도록 다양한 속성과 메서드를 제공합니다.

주요 속성

• width & height: 이미지의 크기를 지정합니다. 단위는 논리적 픽셀입니다.
• color: 이미지 위에 색상을 오버레이로 적용합니다. 주로 투명도나 색조를 조정할 때 사용됩니다.
• fit: BoxFit 열거형을 사용하여 이미지가 할당된 공간 내에서 어떻게 채워질지를 결정합니다. 예를 들어 BoxFit.cover, BoxFit.contain, BoxFit.fill 등이 있습니다.
• alignment: 이미지 내에서의 정렬을 지정합니다. Alignment 클래스를 사용하여 정렬 방향을 정할 수 있습니다.

이미지 추가하고 사용하기

1. 이미지를 assets/images/ 폴더에 위치시킵니다.

2. pubspec.yaml에 이미지를 추가합니다.

flutter:
  assets:
    - assets/images/facebook.png
    - assets/images/flutter.png
    - assets/images/google.png
    - assets/images/instagram.png

3. 다음과 같이 추가한 이미지를 Image class를 이용해서 추가합니다.

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/images/facebook.png', width: 50, height: 50),
            const SizedBox(height: 20),
            Image.asset('assets/images/flutter.png', width: 50, height: 50),
            const SizedBox(height: 20),
            Image.asset('assets/images/google.png', width: 50, height: 50),
            const SizedBox(height: 20),
            Image.asset('assets/images/instagram.png', width: 50, height: 50),
          ],
        ),

결과

아이콘 사용하기

Flutter는 사용하기 쉬운 일련의 Material Design 아이콘을 포함하고 있습니다.

이 아이콘들은 pubspec.yaml 파일에 선언할 필요없이 코드에서 직접 사용할 수 있습니다.

Icon Class (공식문서)

Icon 클래스는 아이콘을 쉽게 표시하고 스타일링할 수 있는 위젯으로, 주로 Material Design 아이콘을 기반으로 합니다

주요 속성

• icon: 이 속성은 Icons 클래스에 정의된 상수를 사용하여 설정됩니다. 예를 들어, Icons.star 또는 Icons.home과 같이 사용할 수 있습니다.
• size: 아이콘의 크기를 정의합니다. 일반적으로 픽셀 단위로 설정되며, 아이콘의 너비와 높이에 모두 적용됩니다.
• color: 아이콘의 색상을 지정합니다. Colors 클래스에서 제공하는 색상을 사용하거나, 직접 Color 객체를 생성하여 지정할 수 있습니다.
• semanticLabel: 아이콘의 의미를 설명하는 텍스트를 제공합니다. 이는 스크린 리더와 같은 접근성 도구에서 사용자에게 아이콘의 기능을 설명하는 데 사용됩니다.
• textDirection: 아이콘의 텍스트 방향을 결정합니다. 일부 아이콘은 좌우 반전이 의미를 달리하기 때문에, 이 속성을 통해 올바른 방향을 설정할 수 있습니다.

FIGMA

다음 링크를 통해 FIGMA에서 Icon들을 시각적으로 확인하고 사용할 수 있습니다.

Material Design Icons

Cupertino Icons

Icon 사용하기

다른 asset들과 달리 Material design과 Cupertino에 포함된 Icon을 직접 사용할 수 있습니다.

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.home,
              size: 50,
            ),
            Icon(
              CupertinoIcons.heart_solid,
              size: 50,
            ),
          ],
        ),

결과

참고 링크

My Repository (_2_widgets_basic)

Flutter 공식 문서 – Assets

QUICKCODER