El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Preferencias Compartidas

Siguiente ►
►

Introducción

Las Preferencias Compartidas (Shared Preferences) son una forma sencilla y eficiente de almacenar datos clave-valor de manera persistente en una aplicación Flutter. Este método es ideal para guardar configuraciones de usuario, estados de la aplicación, y otros datos que necesiten ser persistentes entre sesiones de la aplicación.

Objetivos

  • Entender qué son las Preferencias Compartidas.
  • Aprender a configurar y utilizar el paquete shared_preferences.
  • Implementar ejemplos prácticos de almacenamiento y recuperación de datos.
  • Realizar ejercicios para reforzar los conceptos aprendidos.

¿Qué son las Preferencias Compartidas?

Las Preferencias Compartidas permiten almacenar datos en un formato clave-valor en el almacenamiento local del dispositivo. Estos datos persisten incluso cuando la aplicación se cierra y se vuelve a abrir.

Ventajas

  • Simplicidad: Fácil de usar y configurar.
  • Persistencia: Los datos se mantienen entre sesiones de la aplicación.
  • Rendimiento: Rápido acceso a datos pequeños.

Limitaciones

  • Tamaño: No es adecuado para almacenar grandes cantidades de datos.
  • Seguridad: No es seguro para almacenar información sensible.

Configuración del Paquete shared_preferences

Para utilizar las Preferencias Compartidas en Flutter, primero debemos agregar el paquete shared_preferences a nuestro proyecto.

Paso 1: Agregar Dependencia

Abre el archivo pubspec.yaml y agrega la dependencia:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

Luego, ejecuta el comando flutter pub get para instalar la dependencia.

Paso 2: Importar el Paquete

En el archivo Dart donde deseas utilizar las Preferencias Compartidas, importa el paquete:

import 'package:shared_preferences/shared_preferences.dart';

Uso de Preferencias Compartidas

Guardar Datos

Para guardar datos en las Preferencias Compartidas, primero necesitamos obtener una instancia de SharedPreferences y luego usar los métodos set para almacenar los datos.

Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'JohnDoe');
  await prefs.setInt('age', 30);
  await prefs.setBool('isLoggedIn', true);
}

Recuperar Datos

Para recuperar datos, utilizamos los métodos get correspondientes.

Future<void> loadData() async {
  final prefs = await SharedPreferences.getInstance();
  String? username = prefs.getString('username');
  int? age = prefs.getInt('age');
  bool? isLoggedIn = prefs.getBool('isLoggedIn');

  print('Username: $username');
  print('Age: $age');
  print('Is Logged In: $isLoggedIn');
}

Eliminar Datos

Para eliminar datos, utilizamos el método remove.

Future<void> removeData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.remove('username');
}

Ejemplo Práctico

Vamos a crear una pequeña aplicación que permita al usuario guardar y recuperar su nombre.

Paso 1: Crear la Interfaz de Usuario

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController _controller = TextEditingController();
  String _savedName = '';

  @override
  void initState() {
    super.initState();
    _loadName();
  }

  Future<void> _loadName() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedName = prefs.getString('name') ?? '';
    });
  }

  Future<void> _saveName() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('name', _controller.text);
    _loadName();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shared Preferences Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your name'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveName,
              child: Text('Save Name'),
            ),
            SizedBox(height: 20),
            Text('Saved Name: $_savedName'),
          ],
        ),
      ),
    );
  }
}

Explicación del Código

  1. Importaciones y Configuración Inicial: Importamos los paquetes necesarios y configuramos la aplicación principal.
  2. Controlador de Texto: Utilizamos un TextEditingController para manejar la entrada del usuario.
  3. Métodos de Carga y Guardado: Creamos métodos para cargar y guardar el nombre utilizando SharedPreferences.
  4. Interfaz de Usuario: Creamos una interfaz simple con un TextField, un ElevatedButton y un Text para mostrar el nombre guardado.

Ejercicios Prácticos

Ejercicio 1: Guardar y Recuperar Edad

Modifica la aplicación anterior para permitir al usuario guardar y recuperar su edad.

Solución

  1. Agrega un nuevo TextEditingController para la edad.
  2. Modifica los métodos _saveName y _loadName para manejar la edad.
  3. Actualiza la interfaz de usuario para incluir un campo de entrada para la edad y mostrar la edad guardada.

Ejercicio 2: Eliminar Datos

Agrega un botón que permita al usuario eliminar su nombre y edad guardados.

Solución

  1. Crea un nuevo método _removeData que utilice prefs.remove.
  2. Agrega un ElevatedButton a la interfaz de usuario que llame a _removeData.

Conclusión

En esta sección, hemos aprendido a utilizar las Preferencias Compartidas en Flutter para almacenar y recuperar datos de manera persistente. Hemos cubierto la configuración del paquete shared_preferences, así como ejemplos prácticos de cómo guardar, recuperar y eliminar datos. Los ejercicios proporcionados te ayudarán a reforzar estos conceptos y a aplicarlos en tus propias aplicaciones.

En la siguiente sección, exploraremos el almacenamiento de archivos en Flutter, lo que nos permitirá manejar datos más complejos y voluminosos.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados