Aleteo – Temas

Los temas son una parte integral de la interfaz de usuario para cualquier aplicación. Los temas se utilizan para diseñar las fuentes y los colores de una aplicación para hacerla más presentable. En Flutter, el widget Theme se usa para agregar temas a una aplicación. Uno puede usarlo para una parte particular de la aplicación, como los botones y la barra de navegación, o definirlo en la raíz de la aplicación para usarlo en toda la aplicación.

Constructor de la clase Theme:

const Theme(
{Key? key,
required ThemeData data,
bool isMaterialAppTheme: false,
required Widget child}
)

Propiedades del widget de tema:

• child: la propiedad child toma un widget como el objeto que se muestra debajo del widget Theme en el árbol de widgets.
• data: Esta propiedad toma la clase ThemeData como objeto para especificar el estilo, los colores y la tipografía a utilizar.
• isMarerialAppTheme: Esta propiedad toma un booleano (final) como objeto. Si se establece en verdadero, entonces el tema usa el diseño del material.

En este artículo, analizaremos el mismo widget en detalle creando una aplicación simple con el widget de tema. Para hacerlo, siga los siguientes pasos:

• crear un tema
• Crear un contenedor para aplicar el tema.
• Use el mismo tema en parte de la aplicación (o en toda la aplicación).

Ahora, veamos los pasos anteriores en detalle.

Crear un tema:

Use el widget Tema para crear un tema. En temas, algunas de las propiedades que se pueden usar se dan a continuación:

• Tema de texto
• brillo
• color primario
• acentuar el color
• Familia tipográfica

Un tema simple se vería como a continuación:

MaterialApp(
  title: title,
  theme: ThemeData(
    // UI
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
 
    // font
    fontFamily: 'Georgia',
    //text style
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

Creación de un contenedor:

En Flutter, un contenedor simple se puede definir de la siguiente manera:

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Hello Geeks!',
    style: Theme.of(context).textTheme.headline6,
  ),
);

Aplicando el tema:

Para anular el tema predeterminado de un widget en Flutter, se puede envolver el mismo widget dentro del widget de tema. Se puede crear una instancia de Themedata() y pasarla al widget respectivo como se muestra a continuación:

Theme(
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

Puede extender el mismo tema a toda la aplicación usando el método copyWith() como se muestra a continuación:

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

Código fuente completo:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'GeeksForGeeks';
 
    return MaterialApp(
      title: appName,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.green,
        accentColor: Colors.deepOrangeAccent,
        fontFamily: 'Georgia',
 
        //text styling
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
      ),
      home: MyHomePage(
        title: appName,
      ),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  final String title;
 
  MyHomePage({Key key, @required this.title}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).accentColor,
          child: Text(
            'Hello Geeks!',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
      ),
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(
          colorScheme:
          Theme.of(context).colorScheme.copyWith(secondary: Colors.red),
        ),
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.arrow_circle_up),
        ),
      ),
    );
  }
}

Producción: