El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Preferències Compartides

Següent ►
►

Introducció

Les Preferències Compartides (Shared Preferences) són una manera senzilla i eficient d'emmagatzemar dades petites i primitives en forma de parells clau-valor. Aquest mètode és ideal per guardar configuracions de l'usuari, estats de l'aplicació o qualsevol altra informació que necessiti persistir entre sessions.

Conceptes Clau

  • Clau-Valor: Les dades s'emmagatzemen com a parells clau-valor, on la clau és una cadena única que identifica el valor.
  • Persistència: Les dades emmagatzemades en les Preferències Compartides persisteixen fins que esborrem explícitament.
  • Tipus de Dades: Les Preferències Compartides suporten tipus de dades primitives com int, double, bool, String i List<String>.

Configuració

Per utilitzar les Preferències Compartides en Flutter, necessitem afegir el paquet shared_preferences al nostre projecte.

Pas 1: Afegir la Dependència

Afegiu la següent línia al fitxer pubspec.yaml del vostre projecte:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

Pas 2: Instal·lar les Dependències

Executeu el següent comandament per instal·lar les dependències:

flutter pub get

Ús de les Preferències Compartides

Importar el Paquet

Primer, hem d'importar el paquet shared_preferences al nostre fitxer Dart:

import 'package:shared_preferences/shared_preferences.dart';

Guardar Dades

Per guardar dades, utilitzem el mètode set corresponent al tipus de dada que volem emmagatzemar. Aquí teniu un exemple de com guardar una cadena:

Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'flutter_user');
}

Llegir Dades

Per llegir dades, utilitzem el mètode get corresponent al tipus de dada que volem recuperar. Aquí teniu un exemple de com llegir una cadena:

Future<void> readData() async {
  final prefs = await SharedPreferences.getInstance();
  final username = prefs.getString('username') ?? 'default_user';
  print('Username: $username');
}

Esborrar Dades

Per esborrar dades, utilitzem el mètode remove amb la clau corresponent:

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

Exemple Complet

A continuació, es mostra un exemple complet que inclou guardar, llegir i esborrar dades utilitzant Preferències Compartides:

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: SharedPreferencesDemo(),
    );
  }
}

class SharedPreferencesDemo extends StatefulWidget {
  @override
  _SharedPreferencesDemoState createState() => _SharedPreferencesDemoState();
}

class _SharedPreferencesDemoState extends State<SharedPreferencesDemo> {
  String _username = 'default_user';

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

  Future<void> _loadUsername() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _username = prefs.getString('username') ?? 'default_user';
    });
  }

  Future<void> _saveUsername(String username) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('username', username);
    _loadUsername();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shared Preferences Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Username: $_username'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _saveUsername('flutter_user'),
              child: Text('Save Username'),
            ),
            ElevatedButton(
              onPressed: _removeUsername,
              child: Text('Remove Username'),
            ),
          ],
        ),
      ),
    );
  }
}

Exercicis Pràctics

Exercici 1: Guardar i Llegir un Enter

  1. Modifiqueu l'exemple anterior per guardar i llegir un enter (per exemple, l'edat de l'usuari).
  2. Afegiu un camp de text per permetre a l'usuari introduir la seva edat.
  3. Mostreu l'edat guardada a la pantalla.

Solució

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: SharedPreferencesDemo(),
    );
  }
}

class SharedPreferencesDemo extends StatefulWidget {
  @override
  _SharedPreferencesDemoState createState() => _SharedPreferencesDemoState();
}

class _SharedPreferencesDemoState extends State<SharedPreferencesDemo> {
  int _age = 0;
  final TextEditingController _ageController = TextEditingController();

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

  Future<void> _loadAge() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _age = prefs.getInt('age') ?? 0;
    });
  }

  Future<void> _saveAge(int age) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setInt('age', age);
    _loadAge();
  }

  Future<void> _removeAge() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('age');
    _loadAge();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shared Preferences Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Age: $_age'),
            SizedBox(height: 20),
            TextField(
              controller: _ageController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: 'Enter your age'),
            ),
            ElevatedButton(
              onPressed: () {
                final age = int.tryParse(_ageController.text);
                if (age != null) {
                  _saveAge(age);
                }
              },
              child: Text('Save Age'),
            ),
            ElevatedButton(
              onPressed: _removeAge,
              child: Text('Remove Age'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusió

Les Preferències Compartides són una eina poderosa per emmagatzemar dades petites i primitives de manera persistent en les aplicacions Flutter. Amb aquest mòdul, heu après a configurar, guardar, llegir i esborrar dades utilitzant Preferències Compartides. Aquests conceptes són fonamentals per gestionar configuracions i estats de l'usuari de manera eficient.

◄ Anterior
◄
Següent ►
►

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats