본문 바로가기
개발노트/Flutter

[Flutter] font 적용하기

by 전지적진영시점 2023. 6. 9.
반응형

개발 환경

---------------------------------

OS : Mac

개발 툴 : android studio

개발 언어 : dart

개발 프레임워크 : flutter

---------------------------------

 

Flutter 폰트 설정하기

 

1. assets 파일에 폰트를 넣어준다.

 

 

2. pubspec.yaml 파일에 assets 폴더에 넣은 폰트 파일들의 경로와 이름을 설정해주자

 

fonts:
  - family: roboto_bold
    fonts:
      - asset: assets/RobotoMono-Bold.ttf
        weight: 100

  - family: noto_medium
    fonts:
      - asset: assets/noto_medium.ttf
        weight: 100

 

3. 자 이제 선언한 이름만 가져다가 쓰면 된다. 굳

 

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'noto_medium'),
      // theme: ThemeData(fontFamily: 'roboto_bold'),
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: const [
                Text('테스트 입니다 Whisper', style: TextStyle(fontSize: 25)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

반응형

댓글