Getting started

Vor einem tiefen Einstieg in die genaue Funktionsweise und Mechanismen von Riverpod, fangen wir zunächst mit den Basics an: Installation von Riverpod, dann schreiben wir ein "Hello World".

Welches Paket ist zu installieren

Zunächst müssen wir uns klar machen, dass Riverpod über mehrere Pakete verteilt ist, die leicht unterschiedlich genutzt werden. Welche Variante von Riverpod eingesetzt werden soll, hängt von der App ab, die entwickelt werden soll.

Die folgende Tabelle hilft bei der Entscheidung, welches Paket eingesetzt werden soll: You can refer to the following table to help you decide which package to use:

App Typ	Paket Name	Beschreibung
Flutter + flutter_hooks	hooks_riverpod	Erlaubt die Nutzung von beiden Paketen flutter_hooks und Riverpod.
Flutter only	flutter_riverpod	Ein einfacher Weg um Riverpod in Flutter Applikationen zu verwenden.
Dart only (No Flutter)	riverpod	Eine Riverpod Version ohne die Flutter Klassen.

Installation des Pakets

Wenn die Entscheidung getroffen wurde, welches Paket verwendet werden soll, füge folgendes in deine pubspec.yaml Datei ein:

Flutter + flutter_hooks

pubspec.yaml

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^2.1.1

Dann führe flutter pub get aus.

Flutter

pubspec.yaml

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.1

Dann führe flutter pub get aus.

Dart only

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"

dependencies:
  riverpod: ^2.1.1

Dann führe flutter pub get aus.

Das war's. Du hast Riverpod zu deiner App hinzugefügt!

Anwendungsbeispiel: Hello World

Nachdem du Riverpod installiert hast, kannst du es anfangen zu verwenden.

Die folgenden Snippets zeigen, wie die neue Dependency dazu verwendet werden kann um ein "Hello world" zu erstellen:

Flutter + flutter_hooks

lib/main.dart

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

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Note: MyApp is a HookConsumerWidget, from hooks_riverpod.
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Das kannst du dann mit flutter run ausführen. Das wird dir "Hello world" aufs Gerät rendern.

Flutter

lib/main.dart

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

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Das kannst du dann mit flutter run ausführen. Das wird dir "Hello world" aufs Gerät rendern.

Dart only

lib/main.dart

import 'package:riverpod/riverpod.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  // This object is where the state of our providers will be stored.
  final container = ProviderContainer();

  // Thanks to "container", we can read our provider.
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}

Das kannst du dann mit flutter run ausführen. Das wird dir "Hello world" aufs Gerät rendern.

Weiterführend: Installation von Code Snippets

Wenn du Flutter und Vscode verwendest, schau dir Flutter Riverpod Snippets an

Wenn du Flutter und Android Studio oder IntelliJ verwendest, schau dir Flutter Riverpod Snippets an