flutter_custom_fonts Download - flutter_custom

flutter_custom_fonts

Baixar fonte

1.0.0

Baixar

flutter_custom_fonts

Como adicionar fontes personalizadas em vibração

Introdução:

Neste artigo, aprenderemos como adicionar fontes personalizadas no aplicativo Flutter. Adicionaremos fontes .ttf neste exemplo. O Google Fontes fornece fontes gratuitas para que baixemos fontes a partir daí. Adicionaremos fontes Pacifico e Robotocondensed neste exemplo. Então, vamos adicionar fontes personalizadas no aplicativo Flutter no exemplo abaixo.

Saída:

Passos:

Etapa 1: Primeira e etapa básica para criar um novo aplicativo no Flutter. Se você é iniciante no Flutter, pode verificar meu blog criar um primeiro aplicativo no Flutter. Eu criei um aplicativo chamado "Flutter_Custom_Fonts".

Etapa 2: Agora, faça o download das fontes do Google Fontes ou de outro site e coloque o projeto Fontes. Crie uma pasta nomeada como "fontes" no diretório raiz do projeto e coloque as fontes nessa pasta. Confira a captura de tela abaixo para obter mais compreensão.

Etapa 3: agora configure as fontes no arquivo pubSpec.yaml. O arquivo pubSpec.yaml é um arquivo de configuração para plugins, fontes, imagens etc. Confira o código abaixo que você precisa configurar no seu arquivo 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

Etapa 4: Agora, no arquivo main.Dart, usaremos as fontes para estilizar nosso texto. Abaixo está a implementação de programação disso.

 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),
           ),
         ],
       ),
     ),
   );
 }
}

Hurrey…. Execute o aplicativo e teste -o no emulador/simulador ou dispositivo :))))

Conclusão:

Aprendemos que como adicionar fontes personalizadas no aplicativo Flutter. Existem três etapas para isso 1. Faça o download das fontes e coloque na pasta 2 Fonts 2. Configure fontes no arquivo pubSpec.yaml e 3. Use as fontes para estilizar o texto.