Flutter: uso de fuentes de Google

Cualquier desarrollador de interfaz de usuario que crea una aplicación tiene que lidiar con las fuentes. Google Fonts ofrece una amplia gama de fuentes que se pueden utilizar para mejorar las fuentes de la interfaz de usuario. Flutter proporciona un paquete de fuentes de Google que se puede usar para implementar varias fuentes disponibles. Algunas fuentes que están disponibles para su uso a través del paquete de fuentes de Google se enumeran a continuación:

• roboto
• abierto sin
• Lato
• osvaldo
• raleway

En este artículo, crearemos una aplicación simple e implementaremos algunas fuentes de Google. Para hacerlo, siga los siguientes pasos:

• Agrega la dependencia de google_fonts al archivo pubspec.yaml.
• Importe la dependencia al archivo main.dart.
• Usa el StatelessWidget para darle estructura a la aplicación
• Use un StatefulWidget para diseñar la página de inicio de la aplicación
• Agregue un texto al cuerpo del cuerpo de la aplicación y aplique las fuentes

Adición de dependencia:

Use la dependencia de fuentes de Google en pubspec.yaml como se muestra a continuación:

Dependencia de importación:

Para importar la dependencia en el archivo main.dart como se muestra a continuación:

import 'package:google_fonts/google_fonts.dart';

Creación de la estructura de la aplicación:

Use StatelessWidget para darle una estructura simple a la aplicación como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

Diseño de la página de inicio:

Para el diseño, la página de inicio de la aplicación utiliza StatefulWidget. Inicia el estado en 0 que cuenta la cantidad de clics en el botón que estaremos agregando a la página de inicio. Para hacerlo, use lo siguiente:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

Implementando las fuentes:

La fuente que seremos será la fuente Oswald y la fuente Lato . En la propiedad TextStyle puede agregar lo mismo que se muestra a continuación:

    children: <Widget>[
      Text(
        'You have pushed the button this many times:',
        style: GoogleFonts.oswald(textStyle: display1),
      ),
      Text(
        '$_counter',
        style: GoogleFonts.lato(fontStyle: FontStyle.italic),
      ),
    ],
  ),
),

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    final TextStyle display1 = Theme.of(context).textTheme.headline4;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: GoogleFonts.oswald(textStyle: display1),
            ),
            Text(
              '$_counter',
              style: GoogleFonts.lato(fontStyle: FontStyle.italic),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

Producción: