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

Ús de Hive per a l'Emmagatzematge Local

Següent ►
►

Hive és una base de dades NoSQL lleugera i ràpida per a Flutter i Dart. És ideal per a emmagatzematge local en aplicacions mòbils gràcies a la seva facilitat d'ús i rendiment. En aquesta secció, aprendrem com configurar i utilitzar Hive per emmagatzemar dades localment en una aplicació Flutter.

Continguts

  1. Introducció a Hive
  2. Configuració de Hive
  3. Definició de Models
  4. Operacions Bàsiques amb Hive
  5. Exemple Pràctic
  6. Exercicis Pràctics

Introducció a Hive

Hive és una base de dades NoSQL que ofereix les següents característiques:

  • Rendiment Alt: Optimitzada per a operacions ràpides.
  • Tipus Fort: Suporta tipus de dades personalitzats.
  • Sincronització: Suporta operacions síncrones i asíncrones.
  • Persistència: Emmagatzema dades de manera persistent en el dispositiu.

Configuració de Hive

Pas 1: Afegir Dependències

Afegim les dependències necessàries al fitxer pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  hive: ^2.0.0
  hive_flutter: ^1.0.0

dev_dependencies:
  hive_generator: ^1.0.0
  build_runner: ^2.0.0

Pas 2: Inicialitzar Hive

Inicialitzem Hive en el fitxer principal de l'aplicació (main.dart):

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

void main() async {
  await Hive.initFlutter();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hive Example')),
        body: Center(child: Text('Hello, Hive!')),
      ),
    );
  }
}

Definició de Models

Per emmagatzemar objectes personalitzats, hem de definir models i generar adaptadors.

Pas 1: Crear la Classe del Model

Creem una classe per al model que volem emmagatzemar. Per exemple, un model Contact:

import 'package:hive/hive.dart';

part 'contact.g.dart';

@HiveType(typeId: 0)
class Contact {
  @HiveField(0)
  final String name;

  @HiveField(1)
  final int age;

  Contact(this.name, this.age);
}

Pas 2: Generar l'Adaptador

Executem el següent comandament per generar l'adaptador:

flutter packages pub run build_runner build

Això generarà un fitxer contact.g.dart amb l'adaptador necessari.

Pas 3: Registrar l'Adaptador

Registrem l'adaptador en el fitxer principal (main.dart):

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'contact.dart';

void main() async {
  await Hive.initFlutter();
  Hive.registerAdapter(ContactAdapter());
  runApp(MyApp());
}

Operacions Bàsiques amb Hive

Obrir una Caixa

Abans de realitzar operacions, hem d'obrir una caixa:

var box = await Hive.openBox('contactsBox');

Afegir Dades

Afegim un objecte Contact a la caixa:

var contact = Contact('John Doe', 25);
await box.add(contact);

Llegir Dades

Llegim dades de la caixa:

var contact = box.getAt(0) as Contact;
print('Name: ${contact.name}, Age: ${contact.age}');

Actualitzar Dades

Actualitzem un objecte existent:

contact.name = 'Jane Doe';
await box.putAt(0, contact);

Eliminar Dades

Eliminem un objecte de la caixa:

await box.deleteAt(0);

Exemple Pràctic

A continuació, implementarem un exemple pràctic que mostra una llista de contactes i permet afegir-ne de nous.

Pas 1: Crear la Interfície d'Usuari

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'contact.dart';

void main() async {
  await Hive.initFlutter();
  Hive.registerAdapter(ContactAdapter());
  runApp(MyApp());
}

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

class ContactListScreen extends StatefulWidget {
  @override
  _ContactListScreenState createState() => _ContactListScreenState();
}

class _ContactListScreenState extends State<ContactListScreen> {
  Box<Contact> contactBox;

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

  Future<void> _openBox() async {
    contactBox = await Hive.openBox<Contact>('contactsBox');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contacts')),
      body: contactBox == null
          ? Center(child: CircularProgressIndicator())
          : ValueListenableBuilder(
              valueListenable: contactBox.listenable(),
              builder: (context, Box<Contact> box, _) {
                if (box.values.isEmpty) {
                  return Center(child: Text('No contacts'));
                }
                return ListView.builder(
                  itemCount: box.length,
                  itemBuilder: (context, index) {
                    final contact = box.getAt(index);
                    return ListTile(
                      title: Text(contact.name),
                      subtitle: Text('Age: ${contact.age}'),
                    );
                  },
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _addContact(),
        child: Icon(Icons.add),
      ),
    );
  }

  Future<void> _addContact() async {
    final newContact = Contact('New Contact', 30);
    await contactBox.add(newContact);
  }
}

Exercicis Pràctics

  1. Afegir Funcionalitat d'Eliminació: Modifica l'exemple pràctic per permetre l'eliminació de contactes.
  2. Editar Contactes: Afegeix la funcionalitat per editar els contactes existents.
  3. Persistència de Dades: Assegura't que les dades es mantenen després de tancar i reobrir l'aplicació.

Solucions

  1. Funcionalitat d'Eliminació:
ListTile(
  title: Text(contact.name),
  subtitle: Text('Age: ${contact.age}'),
  trailing: IconButton(
    icon: Icon(Icons.delete),
    onPressed: () => box.deleteAt(index),
  ),
);
  1. Editar Contactes:
Future<void> _editContact(int index) async {
  final contact = contactBox.getAt(index);
  final updatedContact = Contact(contact.name, contact.age + 1); // Exemple d'actualització
  await contactBox.putAt(index, updatedContact);
}
  1. Persistència de Dades: Hive ja maneja la persistència de dades automàticament. Assegura't que la caixa s'obre correctament en initState.

Conclusió

En aquesta secció, hem après a utilitzar Hive per a l'emmagatzematge local en aplicacions Flutter. Hem cobert la configuració inicial, la definició de models, les operacions bàsiques i hem implementat un exemple pràctic. A més, hem proporcionat exercicis per reforçar els conceptes apresos. Amb Hive, podem gestionar dades localment de manera eficient i senzilla.

◄ 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