폰트, 이미지, 아이콘과 같은 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: 7003. 다음과 같이 추가한 폰트를 사용합니다.
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.png3. 다음과 같이 추가한 이미지를 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들을 시각적으로 확인하고 사용할 수 있습니다.
Icon 사용하기
다른 asset들과 달리 Material design과 Cupertino에 포함된 Icon을 직접 사용할 수 있습니다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
size: 50,
),
Icon(
CupertinoIcons.heart_solid,
size: 50,
),
],
),결과
I just like the helpful information you provide in your articles
I like the efforts you have put in this, regards for all the great content.