DEV Community: Rubén Saavedra Prado

Modo oscuro y claro en Flutter utilizando Riverpod

Rubén Saavedra Prado — Sat, 18 Nov 2023 23:34:50 +0000

Siguiendo con el articulo anterior Modo oscuro y claro en Flutter utilizando GetX, ahora realizaremos la misma aplicación pero utilizando Riverpod. Riverpod es un paquete para gestión de estado, ayuda a organizar y gestionar la información que se utiliza en la aplicación de manera eficiente. Proporciona un enfoque más declarativo y modular para la gestión del estado en comparación con otras soluciones.

Para este ejemplo utilizaremos Riverpod Hooks, que es una extensión de Riverpod que proporciona hooks para trabajar con el paquete Riverpod en aplicaciones Flutter.

Creando nuestro proyecto

Para crear el proyecto ejecuta el siguiente comando:

flutter create riverpod_theme

Luego agregamos el paquete de Riverpod hooks al proyecto en nuestro archivo pubspec.yaml.

hooks_riverpod: ^2.4.4

Y por último ejecutamos el comando pub get para obtener los paquetes en nuestro proyecto.

flutter pub get

Creando nuestro tema

Primero crearemos nuestro archivo theme.dart donde tendremos definidos nuestro modo claro y oscuro.

import 'package:flutter/material.dart';

final ThemeData darkAppTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.amber,
  buttonTheme: const ButtonThemeData(
    buttonColor: Colors.amber,
    disabledColor: Colors.grey,
  ),
);

final ThemeData lightAppTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  buttonTheme: const ButtonThemeData(
    buttonColor: Colors.blue,
    disabledColor: Colors.grey,
  ),
);

Utilizando Riverpod crearemos una clase provider para el manejo de estado de nuestro tema dentro de la aplicación. Crearemos el archivo themes_provider.dart y agregaremos el siguiente código:

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final themesProvider = StateNotifierProvider<ThemesProvider, ThemeMode>((ref) {
  return ThemesProvider();
});

class ThemesProvider extends StateNotifier<ThemeMode> {
  ThemesProvider() : super(ThemeMode.system);

  void changeTheme(bool isOn) {
    state = isOn ? ThemeMode.dark : ThemeMode.light;
  }
}

Utilizando nuestro tema

Para utilizar nuestro tema crearemos una pantalla que será nuestro Home donde agregaremos un action en nuestro AppBar para establecer el tema de la aplicación.

En nuestra pantalla de Home utilizaremos ConsumerWidget para estar a la escucha de los cambios generados en nuestra clase provider creada para manejar el estado de de nuestra tema. Crearemos el archivo home.dart y agregaremos el siguiente código:

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeModeState = ref.watch(themesProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Riverpod Theme'),
        actions: [
          IconButton(
              icon: Icon(
                themeModeState == ThemeMode.light
                    ? Icons.dark_mode
                    : Icons.light_mode,
              ),
              onPressed: () => ref.read(themesProvider.notifier).changeTheme(
                  themeModeState == ThemeMode.light ? true : false)),
        ],
      ),
    );
  }
}

Finalmente en nuestro archivo main.dart utilizaremos ProviderScope de Riverpod para nuestro Widget principal. Adicionalmente estableceremos los valores para theme y darkTheme utilizando las configuraciones de los temas que agregamos en nuestro archivo theme.dart

void main() {
  runApp(
    const ProviderScope(child: MyApp()),
  );
}

class MyApp extends ConsumerWidget {
  const MyApp({
    super.key,
  });
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeModeState = ref.watch(themesProvider);
    return MaterialApp(
      theme: lightAppTheme,
      darkTheme: darkAppTheme,
      themeMode: themeModeState,
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

Ejecutando nuestra aplicación

Utiliza el siguiente comando para correr la aplicación y puedas ver todo nuestro código en acción.

flutter run

Conclusiones

Implementar el modo oscuro y modo claro en nuestras aplicaciones puede mejorar la experiencia del usuario al brindarles opciones de personalización y adaptabilidad. Con Riverpod puedes implementar dicha funcionalidad de una forma sencilla y robusta.

Puedes revisar el código en GitHub

Happy Coding! ✌️

Modo oscuro y claro en Flutter utilizando GetX

Rubén Saavedra Prado — Wed, 11 Oct 2023 14:43:12 +0000

En la actualidad, la implementación del modo oscuro y modo claro se ha convertido en una característica común en muchas aplicaciones. Implementar esta funcionalidad en una aplicación puede ser beneficioso para los usuarios, ya que les brinda la opción de elegir el tema que mejor se adapte a sus preferencias y necesidades. El modo oscuro, por ejemplo, puede ser útil para reducir la fatiga visual en entornos de poca luz, mientras que el modo claro puede ser más adecuado para entornos bien iluminados. No obstante, es importante tener en cuenta la accesibilidad y legibilidad en ambos modos para garantizar una experiencia óptima para todos los usuarios.

En este artículo vamos a explorar cómo implementar el modo oscuro y el modo claro en una aplicación utilizando el paquete GetX en Flutter. GetX es un paquete de administración de estado y navegación que proporciona herramientas y funcionalidades útiles para el desarrollo de aplicaciones en Flutter.

Creando nuestro proyecto

Para crear el proyecto ejecuta el siguiente comando.

flutter create getx_theme

Luego agregamos el paquete de GetX al proyecto en nuestro archivo pubspec.yaml.

get: any

Y por último ejecutamos el comando pub get para obtener los paquetes en nuestro proyecto.

flutter pub get

Creando nuestro tema

Primero crearemos nuestro archivo theme.dart donde tendremos definidos nuestro modo claro y oscuro.

import 'package:flutter/material.dart';

final ThemeData darkAppTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.amber,
  buttonTheme: const ButtonThemeData(
    buttonColor: Colors.amber,
    disabledColor: Colors.grey,
  ),
);

final ThemeData appTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  buttonTheme: const ButtonThemeData(
    buttonColor: Colors.blue,
    disabledColor: Colors.grey,
  ),
);

Ahora, utilizando GetX crearemos un controlador para el manejo de nuestro tema dentro de la aplicación. Creamos el archivo theme_controller.dart y agregamos el siguiente código.

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ThemeController extends GetxController {
  ThemeController({required this.context});

  BuildContext context;
  late bool isDarkMode;

  @override
  void onInit() {
    isDarkMode = Theme.of(context).brightness == Brightness.dark;
    super.onInit();
  }

  void toggleDarkMode() {
    isDarkMode = !isDarkMode;
    if (isDarkMode) {
      Get.changeTheme(ThemeData.dark());
    } else {
      Get.changeTheme(ThemeData.light());
    }
    update();
  }
}

Utilizando nuestro tema

Para utilizar nuestro tema crearemos una pantalla que será nuestro Home donde agregaremos un action en nuestro AppBar para establecer el tema de la aplicación.

Además en nuestro Home es donde utilizaremos el controlador creado para el manejo del valor actual de nuestro tema dentro de la aplicación:

Get.put(ThemeController(context: context));

Nuestro Home quedará de la siguiente manera:

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(ThemeController(context: context));
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetX Theme'),
        actions: [
          GetBuilder<ThemeController>(
            builder: (controller) => IconButton(
                icon: Icon(
                  controller.isDarkMode ? Icons.light_mode : Icons.dark_mode,
                ),
                onPressed: () => controller.toggleDarkMode()),
          ),
        ],
      ),
    );
  }
}

Finalmente en nuestro archivo main.dart utilizaremos GetMaterialApp de GetX para crear nuestro Widget principal. Adicionalmente estableceremos los valores para theme y darkTheme utilizando las configuraciones de los temas que agregamos en nuestro archivo theme.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: appTheme,
      darkTheme: darkAppTheme,
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

Ejecutando nuestra aplicación

Utiliza el siguiente comando para correr la aplicación y puedas ver todo nuestro código en acción.

flutter run

Conclusiones

En resumen, la implementación del modo oscuro y modo claro en una aplicación puede mejorar la experiencia del usuario al brindarles opciones de personalización y adaptabilidad. Existen diferentes manera de implementar esta funcionalidad y GetX es una de ellas, proporcionándonos una forma robusta y sencilla.

Puedes revisar el código en GitHub

Happy Coding! ✌️

Flutter Version Management (FVM)

Rubén Saavedra Prado — Mon, 13 Feb 2023 21:21:09 +0000

¿Qué es FVM?

Flutter Version Management, es una sencilla y muy útil CLI (Command-line interface) que puedes utilizar para administrar diferentes versiones de Flutter en tu ambiente local de desarrollo.

¿Cómo instalar FVM?
Puedes instalar FVM en diferentes Sistemas Operativos. A continuación te muestro los pasos a seguir para instalarlo en Mac, Windows y Linux.

Mac

Abre la terminal y ejecuta los siguientes comandos:

brew tap leoafarias/fvm
brew install fvm

Windows

Para instalar en Windows utiliza el gestor de paquetes chocolatey, una vez instalado, ejecuta el siguiente comando:

choco install fvm

Linux

Utilizando Homebrew para Linux, ejecuta el siguiente comando:

brew tap leoafarias/fvm
brew install fvm

Una vez tienes instalado FVM en el Sistema Operativo de tu preferencia, puedes administrar y utilizar diferentes versiones de Flutter en tu ambiente de desarrollo.

Administrando las versiones de Flutter

Completada la instalación de FVM puedes gestionar las diferentes versiones de Flutter que necesitas utilizar en tu entorno de desarrollo.

Puedes utilizar el comando fvm --help para obtener ayuda de los opciones que puedes utilizar dentro del CLI de FVM.

Para instalar una versión de Flutter ejecuta el siguiente comando:

fvm install {version}

Especifica el número de versión del SDK de Flutter que deseas instalar, puedes consultar las versiones en el sitio oficial o puedes ejecutar el siguiente comando para obtener un listado de todas las versiones disponibles:

fvm release

Si deseas remover una versión previamente instalada:

fvm remove {version}

Para obtener un listado de las versiones que tengas instaladas en tu entorno, ejecuta:

fvm list

Para utilizar una versión específica de Flutter utiliza el siguiente comando:

fvm use {version}

Si recibes un mensaje de advertencia y no te permite usar la versión que deseas, puedes agregar el parámetro --force :

fvm use {version} --force

Ahora para correr tu aplicación desde la línea de comando, deberás ejecutar:

fvm flutter run

Tu aplicación se ejecutará utilizando la versión de Flutter que tengas establecida en la configuración de FVM.

Conclusión
FVM es una herramienta muy útil cuando te encuentras desarrollando o dando mantenimiento a distintas aplicaciones móviles creadas en diferentes versiones de Flutter. Puedes cambiar de versión con mucha facilidad sin alterar tu entorno local de desarrollo.

FVM puede ser muy práctico para procesos de migración o actualización del SDK para tus aplicaciones, permitiéndote hacer pruebas y validaciones en un ambiente controlado.

Si deseas indagar más sobre esta herramienta te invito a que revises con más detalle la documentación del sitio oficial:

Sitio oficial

También puedes revisar el código fuente disponible en Github:

Repositorio Github

Happy coding!✌️