flutter_custom_fonts 다운로드 - flutter_custom

flutter_custom_fonts

글꼴 다운로드

1.0.0

다운로드

flutter_custom_fonts

플러터에 사용자 정의 글꼴을 추가하는 방법

소개:

이 기사에서는 Flutter 응용 프로그램에 사용자 정의 글꼴을 추가하는 방법을 배웁니다. 이 예에서 .ttf 글꼴을 추가합니다. Google 글꼴은 무료 글꼴을 제공하므로 글꼴을 다운로드합니다. 이 예에서는 Pacifico 및 Robotocondensed 글꼴을 추가 할 것입니다. 아래 예제에서 Flutter App에 사용자 정의 글꼴을 추가하겠습니다.

산출:

단계 :

1 단계 : Flutter에서 새 응용 프로그램을 작성하는 첫 번째 및 기본 단계. Flutter의 초보자라면 내 블로그에서 Flutter에서 첫 번째 앱을 작성하는 것을 확인할 수 있습니다. “flutter_custom_fonts”라는 앱을 만들었습니다.

2 단계 : 이제 Google 글꼴 또는 다른 사이트에서 글꼴을 다운로드하고 글꼴 프로젝트를 작성하십시오. Project Root 디렉토리 아래에서 "글꼴"이라는 폴더를 작성하고 글꼴을 해당 폴더에 넣으십시오. 자세한 내용은 아래 스크린 샷을 확인하십시오.

3 단계 : 이제 pubspec.yaml 파일에서 글꼴을 구성하십시오. pubspec.yaml 파일은 플러그인, 글꼴, 이미지 등의 구성 파일입니다. pubspec.yaml 파일에서 구성 해야하는 아래 코드를 확인하십시오.

 fonts:
   - family: Pacifico
     fonts:
       - asset: fonts/Pacifico-Regular.ttf
   - family: RobotoCondensed
     fonts:
       - asset: fonts/RobotoCondensed-Regular.ttf
       - asset: fonts/RobotoCondensed-Bold.ttf
         weight: 700

4 단계 : 이제 main.dart 파일에서 글꼴을 사용하여 텍스트를 스타일링합니다. 아래는 그 프로그래밍 구현입니다.

 import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.purple,
     ),
     home: MyHomePage(),
   );
 }
}
 
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Flutter Custom Fonts'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'Pacifico Regular',
             style: TextStyle(
                 fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'Pacifico Bold',
             style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontWeight: FontWeight.bold,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Regular',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Bold',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed',
                 fontWeight: FontWeight.w700,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
         ],
       ),
     ),
   );
 }
}

허리…. 앱을 실행하고 에뮬레이터/시뮬레이터 또는 장치에서 테스트하십시오 :))).

결론:

Flutter Application에서 사용자 정의 글꼴을 추가하는 방법을 배웠습니다. 그 1에는 세 가지 단계가 있습니다. 글꼴을 다운로드하고 글꼴 폴더 2로 배치하십시오. 글꼴을 pubspec.yaml 파일로 구성하고 3. 글꼴을 사용하여 텍스트를 스타일링하십시오.