El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció a Riverpod

Riverpod és un paquet de gestió d'estat per a Flutter que ofereix una manera més segura i flexible de gestionar l'estat en comparació amb altres solucions com Provider. Riverpod es basa en els mateixos principis que Provider, però amb algunes millores clau que el fan més robust i fàcil d'utilitzar.

Característiques Clau de Riverpod

Seguretat en temps de compilació: Riverpod detecta errors en temps de compilació, evitant molts problemes comuns que es poden trobar en temps d'execució.
Sense context: No cal passar el BuildContext per accedir als proveïdors, el que simplifica molt el codi.
Modularitat: Permet una millor organització del codi, ja que els proveïdors es poden definir fora dels widgets.
Testabilitat: Facilita la creació de proves unitàries gràcies a la seva arquitectura.

Instal·lació de Riverpod

Per començar a utilitzar Riverpod, primer cal afegir el paquet al fitxer pubspec.yaml del teu projecte:

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0

Després, executa flutter pub get per instal·lar el paquet.

Creació d'un Proveïdor amb Riverpod

Exemple Bàsic

A continuació, es mostra un exemple bàsic de com crear i utilitzar un proveïdor amb Riverpod.

Definició del Proveïdor:

import 'package:flutter_riverpod/flutter_riverpod.dart';

// Definim un proveïdor de tipus String
final helloWorldProvider = Provider((ref) => 'Hello, World!');

Ús del Proveïdor en un Widget:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final message = watch(helloWorldProvider);
              return Text(message);
            },
          ),
        ),
      ),
    );
  }
}

Explicació del Codi

ProviderScope: És necessari embolcallar l'aplicació amb ProviderScope per habilitar l'ús de Riverpod.
Provider: Definim un proveïdor que retorna una cadena de text.
Consumer: Utilitzem Consumer per accedir al proveïdor dins del widget i mostrar el valor retornat.

Proveïdors d'Estat

Riverpod també permet crear proveïdors que gestionen l'estat mutable. A continuació es mostra un exemple d'un proveïdor d'estat:

Exemple amb StateProvider

Definició del StateProvider:

final counterProvider = StateProvider((ref) => 0);

Ús del StateProvider en un Widget:

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final counter = watch(counterProvider).state;
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Counter: $counter'),
                  ElevatedButton(
                    onPressed: () {
                      context.read(counterProvider).state++;
                    },
                    child: Text('Increment'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

Explicació del Codi

StateProvider: Definim un proveïdor d'estat que inicialitza el comptador a 0.
watch: Utilitzem watch per obtenir el valor actual del comptador.
read: Utilitzem read per modificar l'estat del comptador.

Exercici Pràctic

Objectiu

Crear una aplicació Flutter que utilitzi Riverpod per gestionar l'estat d'una llista de tasques.

Requisits

Definir un StateProvider per gestionar una llista de tasques.
Crear un formulari per afegir noves tasques a la llista.
Mostrar la llista de tasques en un ListView.

Solució

Definició del StateProvider:

final tasksProvider = StateProvider<List<String>>((ref) => []);

Creació del Formulari i Llista de Tasques:

class TaskApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Task App')),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TaskForm(),
            ),
            Expanded(
              child: TaskList(),
            ),
          ],
        ),
      ),
    );
  }
}

class TaskForm extends StatefulWidget {
  @override
  _TaskFormState createState() => _TaskFormState();
}

class _TaskFormState extends State<TaskForm> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(labelText: 'New Task'),
          ),
        ),
        ElevatedButton(
          onPressed: () {
            final task = _controller.text;
            if (task.isNotEmpty) {
              context.read(tasksProvider).state = [
                ...context.read(tasksProvider).state,
                task
              ];
              _controller.clear();
            }
          },
          child: Text('Add'),
        ),
      ],
    );
  }
}

class TaskList extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final tasks = watch(tasksProvider).state;
    return ListView.builder(
      itemCount: tasks.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(tasks[index]),
        );
      },
    );
  }
}

Explicació del Codi

TaskForm: Un formulari senzill per afegir noves tasques a la llista.
TaskList: Un ListView que mostra les tasques actuals.

Conclusió

Riverpod és una eina poderosa per a la gestió d'estat en aplicacions Flutter. Ofereix una manera més segura i flexible de gestionar l'estat, amb una millor modularitat i testabilitat. Amb els exemples i exercicis proporcionats, hauríeu de tenir una bona comprensió de com utilitzar Riverpod en els vostres projectes Flutter.

Riverpod

Introducció a Riverpod

Característiques Clau de Riverpod

Instal·lació de Riverpod

Creació d'un Proveïdor amb Riverpod

Exemple Bàsic

Explicació del Codi

Proveïdors d'Estat

Exemple amb StateProvider

Explicació del Codi

Exercici Pràctic

Objectiu

Requisits

Solució

Explicació del Codi

Conclusió

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