flutter_custom_fonts

flutter_custom_fonts

Как добавить индивидуальные шрифты в Flutter

Введение:

В этой статье мы узнаем, как добавлять пользовательские шрифты в приложение Flutter. В этом примере мы добавим .ttf шрифты. Google шрифты предоставляют бесплатные шрифты, поэтому мы скачаем шрифты оттуда. В этом примере мы добавим Pacifico и Robotocondensed шрифты. Итак, давайте добавим пользовательские шрифты в приложение Flutter в примере ниже.

Выход:

Шаги:

Шаг 1: Первый и базовый шаг для создания нового приложения в Flutter. Если вы новичок в Flutter, то вы можете проверить мой блог, создать первое приложение в Flutter. Я создал приложение, названное как «flutter_custom_fonts».

Шаг 2: Теперь загрузите шрифты с Google Fonts или с другого сайта и поместите проект шрифтов. Создайте папку, названную как «шрифты», в рамках каталога Project Root и поместите шрифты в эту папку. Проверьте ниже скриншот для получения дополнительной информации.

Шаг 3: Теперь настройте шрифты в файле pubspec.yaml. File 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. Для этого есть три шага. Загрузите шрифты и поместите в папку шрифтов 2. Настройте шрифты в файл pubspec.yaml и 3. Используйте шрифты, чтобы уладить текст.

Git Repo: https://github.com/myvsparth/flutter_custom_fonts

Связаны с тегами: трепетание, пользовательские шрифты, шрифты Google