플러터 기본기 다지기 - Flutter 앱 개발에서 자주 사용되는 asset과 로컬 폰트 설정 방법

asset이란?

• asset은 앱 구성에 필요한 리소스 파일들을 의미합니다. 예로 아이콘, 이미지, JSON 파일, 폰트 파일 등이 있습니다.
• 이러한 리소스는 앱 빌드 시 내부에 포함되어야 하며, 이를 위해 pubspec.yaml 파일에 등록이 필요합니다.

Text 위젯에서 로컬 폰트(fontFamily) 설정하기

Flutter에서 Text 위젯의 fontFamily를 로컬 폰트로 설정하려면, asset으로 폰트를 등록한 후 사용해야 합니다.

폰트 다운로드

Browse Fonts - Google Fonts

fonts:
  - family: Schyler
    fonts:
      - asset: assets/fonts/Sunflower-Bold.ttf
      - asset: assets/fonts/Sunflower-Light.ttf
      - asset: assets/fonts/Sunflower-Medium.ttf
  # - family: Trajan Pro
  #   fonts:
  #     - asset: assets/fonts/TrajanPro-Regular.ttf
  #     - asset: assets/fonts/TrajanPro-Bold.ttf
  #     - asset: assets/fonts/TrajanPro-Italic.ttf

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    # - images/a.png 하나씩 지정시 사용

전체 코드

name: class_v02  
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at <https://developer.android.com/studio/publish/versioning>
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# <https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html>
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=3.4.4 <4.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^3.0.0

# For information on the generic Dart part of this file, see the
# following page: <https://dart.dev/tools/pub/pubspec>

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    # - images/a.png 하나씩 지정시 사용

  # An image asset can refer to one or more resolution-specific "variants", see
  # <https://flutter.dev/assets-and-images/#resolution-aware>

  # For details regarding adding assets from package dependencies, see
  # <https://flutter.dev/assets-and-images/#from-packages>

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: Sunflower
      fonts:
        - asset: assets/fonts/Sunflower-Bold.ttf
        - asset: assets/fonts/Sunflower-Light.ttf
        - asset: assets/fonts/Sunflower-Medium.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see <https://flutter.dev/custom-fonts/#from-packages>

 

 

4. 다른 아이콘 스타일 사용 (Outlined, Rounded 등)

Google Fonts Icons는 다양한 스타일(예: Outlined, Rounded, Sharp 등)을 제공합니다. Flutter에서는 Icons 클래스에서 여러 스타일의 아이콘을 제공합니다. 예를 들어:

• Icons.home_outlined – 윤곽선 스타일 아이콘
• Icons.home_rounded – 둥근 스타일 아이콘
• Icons.home_sharp – 직선 스타일 아이콘

 

MaterialApp color theme와 Material 3 색상

• useMaterial3를 사용하면, Material 라이브러리의 최신 버전 사용 가능 (주류 대중성 가능성이 있으므로 참고하라고 함)
• useMaterial3와 seedColor, Theme.of(context).colorScheme를 사용하면, Material 3 디자인 가이드에 따른 색상값을 사용할 수 있음
  • 주요 Theme.of(context).colorScheme
    • primary/primaryContainer: 강조 요소
    • secondary/secondaryContainer: 보조 요소
    • tertiary/tertiaryContainer: 세부 요소
  • colorScheme.primary와 colorScheme.primaryContainer 차이: primary는 강조 색상, primaryContainer는 강조 색상의 배경 색상

import 'package:class_v02/main.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'MyApp3',
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
    ),
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('My App 3', style: TextStyle(color: Theme.of(context).colorScheme.primary),),

        ),
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        body: Column(
          children: [
            Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              width: 50,
              height: 50,
            ),
            Container(
              color: Theme.of(context).colorScheme.secondary,
              width: 50,
              height: 50,
            ),
            Container(
              color: Theme.of(context).colorScheme.secondaryContainer,
              width: 50,
              height: 50,
            ),
            Container(
              color: Theme.of(context).colorScheme.tertiary,
              width: 50,
              height: 50,
            ),
            Container(
              color: Theme.of(context).colorScheme.tertiaryContainer,
              width: 50,
              height: 50,
            ),
          ],
        ),
      ),

    );
  }
}

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key); // MyApp의 생성자

  @override
  Widget build(BuildContext context) {
    // 위젯 트리를 빌드하고 반환하는 메서드
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 디버그 배너 제거
      theme: ThemeData(
        useMaterial3: true, // 머티리얼 디자인 3 사용
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange), // 시드 색상으로 색상 테마 생성
      ),
      home: const LoginPage(), // 홈 화면으로 LoginPage 위젯을 사용
    );
  }
}

class LoginPage extends StatelessWidget {
  // 로그인 페이지를 위한 StatelessWidget
  const LoginPage({Key? key}) : super(key: key); // LoginPage의 생성자

  @override
  Widget build(BuildContext context) {
    // 로그인 페이지의 위젯 트리를 빌드하고 반환
    return Scaffold(
      appBar: AppBar(
        // 머티리얼 3 스타일의 앱바 추가
        title: const Text('로그인'), // 앱바 제목 설정
      ),
      body: Center(
        // 내용물을 중앙에 배치
        child: SingleChildScrollView(
          // 화면이 작을 때 스크롤 가능하게 함
          padding: const EdgeInsets.symmetric(horizontal: 24.0), // 좌우 패딩 설정
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 수직 중앙 정렬
            children: [
              const FlutterLogo(size: 100), // Flutter 로고 추가
              const SizedBox(height: 48.0),
              TextField(
                // 이메일 입력 필드
                decoration: InputDecoration(
                  labelText: '이메일',
                  prefixIcon: const Icon(Icons.email_outlined),
                  border: const OutlineInputBorder(),
                  filled: true, // 머티리얼 3의 채워진 입력 필드 스타일
                  fillColor: Theme.of(context).colorScheme.secondaryContainer,
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                // 비밀번호 입력 필드
                obscureText: true, // 입력된 텍스트를 숨김 처리
                decoration: InputDecoration(
                  labelText: '비밀번호',
                  prefixIcon: const Icon(Icons.lock_outline),
                  border: const OutlineInputBorder(),
                  filled: true,
                  fillColor: Theme.of(context).colorScheme.secondaryContainer,
                ),
              ),
              const SizedBox(height: 24.0),
              FilledButton(
                // 머티리얼 3에서 새로 추가된 FilledButton 사용
                onPressed: () {
                  // TODO: 로그인 로직 추가
                },
                child: const Text(
                  '로그인',
                  style: TextStyle(fontSize: 18.0),
                ),
              ),
              const SizedBox(height: 12.0),
              TextButton(
                // 비밀번호 찾기 버튼
                onPressed: () {
                  // TODO: 비밀번호 찾기 페이지로 이동
                },
                child: const Text(
                  '비밀번호를 잊으셨나요?',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              const SizedBox(height: 16.0),
              Row(
                // 회원가입 안내 문구와 버튼
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('계정이 없으신가요?'),
                  TextButton(
                    onPressed: () {
                      // TODO: 회원가입 페이지로 이동
                    },
                    child: const Text(
                      '회원가입',
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 24.0),
              const Divider(), // 구분선 추가
              const SizedBox(height: 24.0),
              ElevatedButton.icon(
                // 머티리얼 3 스타일의 ElevatedButton.icon 사용
                onPressed: () {
                  // TODO: 소셜 로그인 로직 추가
                },
                icon: const Icon(Icons.g_mobiledata),
                label: const Text('Google로 로그인'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.primaryContainer,
                  foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

머터리얼 디자인 3는 구글이 최신 디자인 트렌드와 사용자 경험을 반영하기 위해 도입한 새로운 디자인 시스템입니다.

ThemeData에서 colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange)와 같이 시드 색상을 활용하면 다음과 같은 이점.

1. 자동 색상 팔레트 생성: 시드 색상 하나만 지정하면 머터리얼 디자인 가이드라인에 따라 다양한 톤과 명도의 색상 팔레트가 자동으로 생성됩니다. 이를 통해 디자인의 일관성을 유지하면서도 손쉽게 테마를 설정할 수 있습니다.
2. 유연한 테마 변경: 시드 색상만 변경하면 전체 앱의 색상 테마가 변경되므로, 다양한 테마를 쉽게 적용하거나 A/B 테스트를 수행할 수 있습니다.
3. 접근성 보장: 자동으로 생성된 색상 팔레트는 명도 대비 등 접근성 기준을 충족하도록 설계되어, 추가적인 조정 없이도 접근성이 높은 디자인을 구현할 수 있습니다.
4. 시간과 비용 절감: 수동으로 각 색상을 지정할 필요 없이, 시드 색상 하나로 전체 팔레트를 관리할 수 있어 개발 시간과 디자인 리소스를 절약할 수 있습니다.