Flutter – Tema oscuro

Hoy en día, casi todas las aplicaciones móviles usan un tema oscuro, por ejemplo, Instagram, Whatsapp, Youtube, etc. Es fácil de implementar en Flutter, solo se requieren unas pocas líneas de código para lograrlo. Pero antes de hacer eso, exploremos algunos conceptos importantes en flutter que se usan para lograr el tema oscuro.

Clase de datos temáticos:

La clase ThemeData define el tema de la aplicación. Se usa dentro de MaterialApp. Ayuda a configurar la apariencia de toda la aplicación. Podemos anularlo según nuestros requisitos y hacer cambios.

Ahora profundicemos en el código y exploremos las cosas nuevas en la clase ThemeData.

Código de ejemplo:

MaterialApp(
 theme: ThemeData(
   primaryColor: Colors.blue,
   accentColor: Colors.yellow,
   textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)),
 ),
  
 home: Scaffold(
   appBar: AppBar(
     title: const Text('ThemeData Example'),
   ),
  
   floatingActionButton: FloatingActionButton(
     child: const Icon(Icons.add),
     onPressed: () {},
   ),
  
   body: Center(
     child: Text(
       'Geeks For Geeks',
     ),
   ),
 ),
)

Parámetros importantes en la clase ThemeData:

1. Brillo:  

Describe el contraste de un tema o paleta de colores.

Ejemplo:

ThemeData(
   brightness:Brightness.light,
 ),
  
ThemeData(
   brightness:Brightness.light,
 )

2. densidad visual:  

La densidad visual es la «compacidad» vertical y horizontal de los componentes en la interfaz de usuario. Nota: la densidad horizontal y vertical debe ser inferior o igual a max Horizontal o MaximumVeriticalDensity, es decir, 4,0

Ejemplo:

ThemeData(
 brightness: Brightness.light,
 visualDensity: VisualDensity(
   horizontal: 2.0,
   vertical: 2.0
 )
),

3. color primario: 

Define el color primario para la aplicación, de manera similar, podemos definir el color primario para un tema claro y un tema oscuro.

Ejemplo:

ThemeData(
 primaryColor: Colors.blue,
),

Del mismo modo, podemos definir el AccentColor , AccentColorLight , AccentColorDark , siéntase libre de usarlos en su aplicación.

4. Datos del tema del icono: 

Define el color, la opacidad y el tamaño de los iconos.

Ejemplo:

ThemeData(
 iconTheme: IconThemeData(
   color: Colors.amber,
   size: 15.0,
   opacity: 10
 )
),

Del mismo modo, puede tener otras propiedades en los documentos oficiales de flutter. Personalmente, recomiendo visitar al menos una vez los documentos oficiales de Flutter.

Ahora que tenemos suficiente conocimiento para lograr nuestro objetivo, comencemos. Vamos a usar el paquete Provider, esto no es obligatorio, podemos hacer la implementación del tema oscuro sin Provider, pero para una mejor arquitectura, lo estamos usando. Agregue el paquete del proveedor al archivo pubspec.yaml.

dardo principal

Esta es nuestra clase principal, la ejecución comienza desde esta clase. Solo eche un vistazo a las propiedades del tema de MaterialApp(), todas las cosas que hemos discutido anteriormente están escritas aquí, supongo que obtendrá algo de claridad aquí.

import 'package:dark_theme_app/Button_tap_listener.dart';
import 'package:dark_theme_app/dark_theme_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
  
  
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ButtonTapListenerClass>(
      create: (context) => ButtonTapListenerClass(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
          
        // Themes
        darkTheme: ThemeData.dark(),
        home: DarkThemeExample(),
        theme: ThemeData(
            brightness: Brightness.dark,
            visualDensity: VisualDensity(horizontal: 2.0, vertical: 2.0),
            primaryColorLight: Color(0xff03203C),
            primaryColorDark: Color(0xff242B2E),
            
            // Icon Theme
            iconTheme:
                IconThemeData(color: Colors.amber, size: 15.0, opacity: 10),
            accentColor: Colors.amber,
            accentColorBrightness: Brightness.light),
      ),
    );
  }
}

 Clase DarkThemeExample:

Esta clase contiene nuestra parte de la interfaz de usuario de la aplicación, cuando tocamos la imagen de la bombilla, llamará al clickEvent() que se define en nuestra clase de negocios. Aquí solo alternamos una variable booleana para obtener un tema oscuro y un tema claro. 

import 'package:dark_theme_app/Button_tap_listener.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
  
class DarkThemeExample extends StatefulWidget {
  @override
  _DarkThemeExampleState createState() => _DarkThemeExampleState();
}
  
class _DarkThemeExampleState extends State<DarkThemeExample> {
  @override
  Widget build(BuildContext context) {
      
    // initialise the provider class
    final object = Provider.of<ButtonTapListenerClass>(context);
    return Scaffold(
      backgroundColor: object.isClicked
          ? Theme.of(context).primaryColorDark
          : Theme.of(context).primaryColorLight,
        
      // appbar
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("Geeks For Geeks"),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 150.0),
        child:  GestureDetector(
          child: object.isClicked
              ? Image.asset(
            "assets/light.png",
            height: 450.0,
          )
              : Image.asset(
            "assets/dark.png",
            height: 450.0,
          ),
          onTap: () {
            object.clickEvent();
          },
        ),
      ),
    );
  }
}

Clase ButtonTapListener:

Esta clase es la clase de negocio en la que hacemos toda la lógica u operación comercial aquí. Para nuestro ejemplo, la funcionalidad de esta clase es menor, pero este es el enfoque correcto para separar nuestra interfaz de usuario y la lógica comercial y seguir una buena arquitectura para crear una aplicación.

En esta clase, ampliamos la clase ChangeNotifier que se encuentra en el paquete del proveedor. Solo observe el evento clickEvent(), allí estamos usando notificarListner(). Cuando llamamos a esta función, simplemente le decimos a los oyentes que la reconstruyan para obtener un valor actualizado o un valor nuevo. En nuestro caso, simplemente alternamos el valor booleano. Al mirarlo, puedes pensar que esto es un desastre, por qué hacemos todas estas cosas para esta pequeña aplicación. Pero créanme, debemos seguir al menos un patrón de arquitectura. Si no desea usarlo, siéntase libre de usar un enfoque simple.

import 'package:flutter/material.dart';
  
class ButtonTapListenerClass extends ChangeNotifier {
  bool isClicked = false;
  
  void clickEvent() {
    isClicked = !isClicked;
    notifyListeners();
  }
}

Producción:

tema oscuro (toque en la bombilla)

tema de luz (toque en la bombilla)