Saltar al contenido

Persistencia de datos en Flutter + Ejemplo práctico

enero 1, 2021

Cuando creamos una aplicación móvil en muchas ocaciones necesitaremos una forma de guardar información dentro de la app, esto en la mayoría de los casos se hace con una base de datos, pero también existe una forma de guardar información de forma permanente en los dispositivos móviles.

Un ejemplo de uso puede ser el token de acceso a la base de datos, también podría se el modo (dark o light) en que el usuario quiere ver tu aplicación en caso de ofrecer la opción. Necesitamos una forma de guardar estás preferencias en el celular. Eso aprenderemos en esta ocación.

Como de costumbre, puede ver el vídeo completo a continuación. En el vídeo hago la explicación de todo lo que necesitas saber, en este articulo dejaré un poco de código de ejemplo y algunos comentarios que pueden resultar útiles.

Como pudiste ver en el vídeo, para acceder a esta funcionalidad necesitamos agregar un package llamado shared_preferences. Para agregarlo debemos ir a la página del package a continuación el link para visitarla: shared_preferences.

Básicamente debemos agregar el package en el pubspect.yaml en la sección de dependecies. Y luego importar el paquete en nuestro archivo donde pensamos usarlo. Luego necesitamos crear una instancia del servicio y con ella vamos a hacer lo set y lo get desde el storage del dispositivo. Aquí dejó el código de ejemplo del la funcionalidad.

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'dart:async';

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(
      title: 'SharedPreferences Demo',
      home: SharedPreferencesDemo(),
    );
  }
}

class SharedPreferencesDemo extends StatefulWidget {
  SharedPreferencesDemo({Key key}) : super(key: key);

  @override
  SharedPreferencesDemoState createState() => SharedPreferencesDemoState();
}

class SharedPreferencesDemoState extends State<SharedPreferencesDemo> {
  Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  Future<int> _counter;

  Future<void> _incrementCounter() async {
    final SharedPreferences prefs = await _prefs;
    final int counter = (prefs.getInt('counter') ?? 0) + 1;

    setState(() {
      _counter = prefs.setInt("counter", counter).then((bool success) {
        return counter;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    _counter = _prefs.then((SharedPreferences prefs) {
      return (prefs.getInt('counter') ?? 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SharedPreferences Demo"),
      ),
      body: Center(
          child: FutureBuilder<int>(
              future: _counter,
              builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return const CircularProgressIndicator();
                  default:
                    if (snapshot.hasError) {
                      return Text('Error: ${snapshot.error}');
                    } else {
                      return Text(
                        'Button tapped ${snapshot.data} time${snapshot.data == 1 ? '' : 's'}.\n\n'
                        'This should persist across restarts.',
                      );
                    }
                }
              })),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Este código de ejemplo es el código que recomienda el package como práctica. Si necesitas el código de la aplicación de contador que yo hice, solo pídelo en lo comentarios y con gusto lo subiré a un repositorio de github para que tengan acceso a él.

Sin más que decir, espero que les haya gustado el vídeo y sobre todo, espero que le haya servido. Un abrazo y hasta la próxima.