Mobilutveckling med Flutter · Lektion

Riverpod för state-hantering

Utforska Riverpod, ett robust och testbart bibliotek för state-hantering, och förstå dess fördelar jämfört med andra lösningar för komplexa appar.

Lektion 3 av 411 steg

Riverpod för state-hantering är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Välkommen till Riverpod!

Riverpod är ett populärt bibliotek för tillståndshantering i Flutter som strävar efter att vara enkelt, robust och testbart. Det är en omarbetad version av paketet Provider, utformad för att åtgärda vissa av dess begränsningar.

Tänk på Riverpod som en kraftfull verktygslåda för att hantera all data i din app, från användarinställningar till hämtad data, på ett säkert och förutsägbart sätt.

Riverpods främsta styrkor

Riverpod erbjuder flera viktiga fördelar:

Säkerhet vid kompilering: Upptäcker fel tidigt, innan appen ens körs.
Testbarhet: Gör det enkelt att testa affärslogik isolerat.
Automatisk frigöring: Providers kan automatiskt rensa resurser när de inte längre behövs.
Inget beroende av widgetträdet: Providers är inte beroende av widgetträdet, vilket gör dem mer flexibla.

Det hjälper dig att skriva renare och mer lättunderhållen kod.

Konfigurera appen

För att använda Riverpod lägger du först till paketet flutter_riverpod i din pubspec.yaml. Omslut sedan hela appen med en widget av typen ProviderScope. Den här widgeten lagrar tillståndet för alla dina providers.

Så här konfigurerar du 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'),
    );
  }
}

Introduktion till providers

Providers är de centrala byggblocken i Riverpod. De innehåller en del av tillståndet och gör det möjligt att komma åt det var som helst i appen.

Den enklaste providern är en Provider, som innehåller ett oföränderligt värde. Du definierar den globalt, så att den blir tillgänglig i hela appen.

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);

Använda providers med `ConsumerWidget`

För att läsa värdet från en provider i gränssnittet använder du en ConsumerWidget. Den här widgeten ger dig åtkomst till en WidgetRef, som ofta namnges ref, och som låter dig ”watcha” eller ”läsa” providers.

ref.watch() gör att widgeten byggs om när providerns värde ändras.

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

Föränderligt tillstånd med `StateProvider`

När du behöver ändra en del av tillståndet direkt använder du en StateProvider. Den exponerar en StateController, som har en state-egenskap som du kan ändra.

Det passar perfekt för enkla gränssnittstillstånd, som en växlingsknapp eller en räknare.

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` för logik

För mer komplext tillstånd som omfattar affärslogik, till exempel att hämta data eller hantera listor, använder du en StateNotifier tillsammans med StateNotifierProvider.

StateNotifier är en klass som du utökar och som innehåller ditt tillstånd. Providern exponerar sedan en instans av din notifier.

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

Asynkron data med `FutureProvider`

Riverpod gör det enkelt att hantera asynkron data, som nätverksförfrågningar, med FutureProvider och StreamProvider.

En FutureProvider exponerar ett AsyncValue, som hanterar tillstånden laddar, fel och data på ett smidigt sätt i gränssnittet.

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` jämfört med `ref.watch`

När du arbetar med providers använder du främst två metoder på ref-objektet:

ref.watch(provider): Lyssnar efter ändringar i en provider. Om providerns tillstånd ändras byggs widgeten eller providern som lyssnar på den om eller körs på nytt. Använd detta i build-metoder.
ref.read(provider): Läser providerns aktuella värde en gång utan att lyssna efter framtida ändringar. Det passar bra för åtgärder som utförs en gång, till exempel knapptryckningar eller initial konfigurering.

Undvik ref.read i build-metoder om du inte uttryckligen vill undvika ombyggnad.

Typer av Riverpod-providers

Vilka typer av Riverpod-providers passar bäst för att hantera en enkel räknare, alltså ett heltal som kan ökas och minskas, och för att hantera komplex affärslogik med flera åtgärder, till exempel att lägga till och ta bort objekt från en att-göra-lista?

Besvara frågan i den interaktiva lektionen

Sammanfattning av Riverpod

Bra jobbat! Du har utforskat Riverpod, en kraftfull och modern lösning för tillståndshantering i Flutter.

Vi har gått igenom ProviderScope för konfigurering av appen.
Vi använde Provider för oföränderlig data och StateProvider för enkelt föränderligt tillstånd.
För komplex logik är StateNotifierProvider tillsammans med StateNotifier centralt.
FutureProvider hjälper till att hantera asynkron data på ett smidigt sätt.
Kom ihåg ref.watch för att lyssna och ref.read för åtkomst vid ett enda tillfälle.

Riverpods säkerhet vid kompilering och testbarhet gör det till ett utmärkt val för robusta Flutter-appar!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Riverpod för state-hantering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Riverpod för state-hantering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Riverpod för state-hantering”?

Utforska Riverpod, ett robust och testbart bibliotek för state-hantering, och förstå dess fördelar jämfört med andra lösningar för komplexa appar. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Riverpod för state-hantering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Mobilutveckling med Flutter