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
- Flutter
- Dart only
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.
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.
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
- Flutter
- Dart only
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 {
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.
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 {
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.
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