Dev/Flutter

[Flutter] Font, Image 등록 및 사용하기

VIPeveloper 2024. 10. 11. 14:59
728x90
반응형

당연하게도 Flutter 에서는 Font랑 Image 를 등록하고 사용하는 방법이 있다.

 

1. 폰트 등록

pubspec.yaml 이라는 파일에서 설정해줄 수 있다.

강의 자료에 있는 폰트와 asset을 아래와 같이 등록해준다.

flutter:
  assets:
   - asset/
  fonts:
    - family: NotoSans
      fonts:
        - asset: asset/fonts/NotoSansKR-Black.otf
          weight: 900
        - asset: asset/fonts/NotoSansKR-Bold.otf
          weight: 700
        - asset: asset/fonts/NotoSansKR-Medium.otf
          weight: 500
        - asset: asset/fonts/NotoSansKR-Regular.otf
          weight: 400
        - asset: asset/fonts/NotoSansKR-Light.otf
          weight: 300
        - asset: asset/fonts/NotoSansKR-Thin.otf
          weight: 100


2. 메인에서 활용

등록된 폰트는 아래처럼 붙여 사용한다.

import 'package:flutter/material.dart';
import 'package:flutter_project_1/common/component/custom_text_form_field.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    
    // 변경 부분 시작
      theme: ThemeData(
        fontFamily: 'NotoSans',
      ),
    // 변경 부분 끝
      ...
  }
}

 

아직까지 어려운 부분은 없다.

728x90
반응형

'Dev > Flutter' 카테고리의 다른 글

[Flutter] TextFormField 분석  (0) 2024.10.11
[Flutter] 초기 세팅, 환경설정 정리  (0) 2024.08.23