Mobilutvikling med Flutter · leksjon

Riverpod for tilstandsbehandling

Utforsk Riverpod, et robust og testbart bibliotek for tilstandsbehandling, og forstå fordelene sammenlignet med andre løsninger for komplekse apper.

Leksjon 3 av 411 trinn

Riverpod for tilstandsbehandling er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Velkommen til Riverpod!

Riverpod er et populært bibliotek for tilstandshåndtering i Flutter som har som mål å være enkelt, robust og testbart. Det er en nytenkt versjon av Provider-pakken, utviklet for å håndtere noen av begrensningene i den.

Tenk på Riverpod som et kraftig verktøysett for å håndtere alle dataene i appen, fra brukerinnstillinger til innhentede data, på en trygg og forutsigbar måte.

Riverpods viktigste styrker

Riverpod har flere viktige fordeler:

Sikkerhet ved kompilering: Oppdager feil tidlig, før appen i det hele tatt kjøres.
Testbarhet: Gjør det enkelt å teste forretningslogikken isolert.
Automatisk avhending: Providers kan automatisk rydde opp i ressurser når de ikke lenger trengs.
Ingen avhengighet av widget-treet: Providers er ikke avhengige av widget-treet, noe som gjør dem mer fleksible.

Det hjelper Dem med å skrive ryddigere og mer vedlikeholdbar kode.

Konfigurere appen

For å bruke Riverpod legger De først til pakken flutter_riverpod i pubspec.yaml. Deretter pakker De hele applikasjonen inn i en widget av typen ProviderScope. Denne widgeten lagrer tilstanden til alle providers.

Slik konfigurerer De den:

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

void main() {
  runApp(
    // Wrap your app in a ProviderScope
    ProviderScope(
      child: MyApp(),
    ),
  );
}

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

Introduksjon til providers

Providers er de grunnleggende byggesteinene i Riverpod. De inneholder en del av tilstanden og gjør det mulig å få tilgang til den fra hvor som helst i appen.

Den enkleste provideren er en Provider, som inneholder en uforanderlig verdi. De definerer den globalt, slik at den er tilgjengelig i hele applikasjonen.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// A simple Provider that holds an immutable string.
final greetingProvider = Provider<String>((ref) {
  return 'Hello from Riverpod!';
});

// You can also provide numbers, objects, etc.
final counterProvider = Provider<int>((ref) => 0);

Bruke providers med `ConsumerWidget`

For å lese verdien til en provider i brukergrensesnittet bruker De en ConsumerWidget. Denne widgeten gir Dem tilgang til en WidgetRef (ofte kalt ref), som lar Dem «watch» eller «read» providers.

ref.watch() gjør at widgeten bygges på nytt når verdien til provideren endres.

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

final greetingProvider = Provider<String>((ref) {
  return 'Hello Riverpod User!';
});

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final greeting = ref.watch(greetingProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Riverpod App')),
            body: Center(child: Text(greeting)),
          );
        },
      ),
    );
  }
}

Endrebar tilstand med `StateProvider`

Når De trenger å endre en del av tilstanden direkte, bruker De en StateProvider. Den eksponerer en StateController, som har en state-egenskap De kan endre.

Dette passer perfekt for enkel tilstand i brukergrensesnittet, for eksempel en bryter eller en teller.

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

// A StateProvider for a simple counter.
final counterProvider = StateProvider<int>((ref) => 0);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final count = ref.watch(counterProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Counter App')),
            body: Center(
              child: Text(
                'Count: $count',
                style: TextStyle(fontSize: 24),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => ref.read(counterProvider.notifier).state++,
              child: Icon(Icons.add),
            ),
          );
        },
      ),
    );
  }
}

`StateNotifierProvider` for logikk

For mer kompleks tilstand som omfatter forretningslogikk (for eksempel innhenting av data eller håndtering av lister) bruker De StateNotifier sammen med StateNotifierProvider.

StateNotifier er en klasse De utvider, og den inneholder tilstanden. Provideren eksponerer deretter en instans av notifieren.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. Define your state class (immutable recommended)
class Todo { 
  final String id; 
  final String description; 
  final bool completed; 
  Todo(this.id, this.description, this.completed); 
}

// 2. Create a StateNotifier to manage the state
class TodosNotifier extends StateNotifier<List<Todo>> {
  TodosNotifier() : super([]); // Initial state is an empty list

  void addTodo(String description) {
    state = [...state, Todo(DateTime.now().toString(), description, false)];
  }

  void toggle(String id) {
    state = [ 
      for (final todo in state) 
        if (todo.id == id) 
          Todo(todo.id, todo.description, !todo.completed) 
        else 
          todo, 
    ];
  }
}

// 3. Create the StateNotifierProvider
final todosProvider = StateNotifierProvider<TodosNotifier, List<Todo>>((ref) {
  return TodosNotifier();
});

Asynkrone data med `FutureProvider`

Riverpod gjør det enkelt å håndtere asynkrone data (som nettverksforespørsler) med FutureProvider og StreamProvider.

En FutureProvider eksponerer en AsyncValue, som håndterer tilstandene lasting, feil og data på en god måte i brukergrensesnittet.

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

// A FutureProvider that simulates fetching data.
final userProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 2)); // Simulate network delay
  return 'John Doe';
});

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final userAsyncValue = ref.watch(userProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Async Data')),
            body: Center(
              child: userAsyncValue.when(
                loading: () => CircularProgressIndicator(),
                error: (err, stack) => Text('Error: $err'),
                data: (user) => Text('User: $user', style: TextStyle(fontSize: 24)),
              ),
            ),
          );
        },
      ),
    );
  }
}

`ref.read` kontra `ref.watch`

Når De samhandler med providers, bruker De hovedsakelig to metoder på ref-objektet:

ref.watch(provider): Lytter etter endringer i en provider. Hvis tilstanden til provideren endres, bygges widgeten eller provideren som lytter, på nytt eller kjøres på nytt. Bruk dette i build-metoder.
ref.read(provider): Leser gjeldende verdi fra en provider én gang, uten å lytte etter fremtidige endringer. Ideelt for engangshandlinger, som knappetrykk eller innledende konfigurering.

Unngå ref.read i build-metoder med mindre De spesifikt ikke ønsker nybygging.

Typer av Riverpod-providers

Hvilke Riverpod-provider-typer egner seg best for å håndtere en enkel teller (ett heltall som kan økes eller reduseres) og for å håndtere kompleks forretningslogikk med flere handlinger (for eksempel å legge til eller fjerne elementer fra en oppgaveliste)?

Besvar den i den interaktive leksjonen

Oppsummering av Riverpod

Godt jobbet! De har utforsket Riverpod, en kraftig og moderne løsning for tilstandshåndtering i Flutter.

Vi lærte om ProviderScope for konfigurering av appen.
Vi brukte Provider for uforanderlige data og StateProvider for enkel endrebar tilstand.
For kompleks logikk er StateNotifierProvider sammen med StateNotifier sentralt.
FutureProvider hjelper med å håndtere asynkrone data på en god måte.
Husk ref.watch for lytting og ref.read for engangstilgang.

Riverpods sikkerhet ved kompilering og testbarhet gjør det til et utmerket valg for robuste Flutter-applikasjoner!

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Riverpod for tilstandsbehandling» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «Riverpod for tilstandsbehandling», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Riverpod for tilstandsbehandling»?

Utforsk Riverpod, et robust og testbart bibliotek for tilstandsbehandling, og forstå fordelene sammenlignet med andre løsninger for komplekse apper. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Riverpod for tilstandsbehandling»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Mobilutvikling med Flutter