Zum Hauptinhalt springen

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 TypPaket NameBeschreibung
Flutter + flutter_hookshooks_riverpodErlaubt die Nutzung von beiden Paketen flutter_hooks und Riverpod.
Flutter onlyflutter_riverpodEin einfacher Weg um Riverpod in Flutter Applikationen zu verwenden.
Dart only (No Flutter)riverpodEine 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:

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.0.0-dev.0

Dann führe flutter pug 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:

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.

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

img