플러터(Flutter) - 폰트 추가하기

안녕하세요 놀이방 사장입니다.

 

이번 포스팅은 플러터 폰트 추가하기 포스팅입니다.

 

저번에는 image를 추가했는데 이번에는 폰트를 추가해봅시다.

 

먼저 폰트 파일을 구해야합니다.

 

저는 do it플러터 책을 보고 실습을 진행하고 있습니다.

 

일단 무료폰트 파일(Pacifico-Regular.ttf)를 사용하겠습니다.

 

** 폰트 파일은 영어만 가능 **

이제 폰트를 준비했으면 프로젝트에 font라는 새 폴더를 만들고 준비한 폰트 파일을 끌어서 넣겠습니다.

 

저번과 동일하게 pubspec.yaml 파일을 열고 폰트를 추가해줍니다.

앞에서 코드를 동일하게 사용중입니다.

 

이미지를 추가했던 코드 밑에 fonts : 를 입력하고 하위에 폰트 정보를 입력해주세요

flutter:
  uses-material-design: true
  assets :
  - image/flutter.png
  fonts:
    - family: Pacifico
      fonts :
        - asset: font/Pacifico-Regular.ttf
          weight: 400

이렇게 추가해주시면 됩니다.

 

이제 폰트를 추가해줘야겠죠??

저번에 무슨 imageWidet.dart파일을 열고 Text 추가하고 style에 TextStyle()함수를 이용해 텍스트 모양을 설정해줍니다.

 

class _ImageWidgetApp extends State<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Widget'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('image/flutter.png', width: 200, height: 100, fit : BoxFit.fill),
              Text('Hello Flutter',
                  style: TextStyle(fontFamily: 'Pacifico',
                  fontSize: 30, color: Colors.black),
              )
            ],
          ),
        ),
      ),
    );
  }
}

이렇게 추가해주면 지정한 폰트 스타일로 나옵니다.

 

이미지, 폰트 다 추가한 소스

main.dart

import 'package:flutter/material.dart';

import 'imageWidget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: ImageWidgetApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Material Design App'),),
        floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
          onPressed: () {},
        ),
        body: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                Icon(Icons.android),
                Text('android')
              ],
            mainAxisAlignment: MainAxisAlignment.center,
            ),
          ),
        ),
    );
  }
}

 

imageWidget.dart

import 'package:flutter/material.dart';

class ImageWidgetApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImageWidgetApp();
  }
}

class _ImageWidgetApp extends State<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Widget'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('image/flutter.png', width: 200, height: 100, fit : BoxFit.fill),
              Text('Hello Flutter',
                  style: TextStyle(fontFamily: 'Pacifico',
                  fontSize: 30, color: Colors.black),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

pubspec.yaml

name: first_flutter_app
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=3.0.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets :
  - image/flutter.png
  fonts:
    - family: Pacifico
      fonts :
        - asset: font/Pacifico-Regular.ttf
          weight: 400