Summary - Riverpod basics

Combine Riverpod, Provider and ConsumerWidget to make a counter.

Summary - Riverpod basics

In this section you learned three things: with Riverpod you do state management independent of BuildContext; with Provider and StateProvider you declare values and writable state; with ConsumerWidget you listen to providers using ref.watch.

final counterP = StateProvider<int>((ref) => 0);
ref.watch(counterP);
ref.read(counterP).state++;

Combining these, you build a counter screen.

Exercise Build a counter screen

Declare a StateProvider<int> named sayacP with initial value 0. In Ekrani ConsumerWidget, display the value with ref.watch(sayacP). On button press, call ref.read(sayacP).state++. In main, call print('sayaç açıldı') and wrap the root with ProviderScope.

Show example solution

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

final sayacP = StateProvider<int>((ref) => 0);

void main() {
  print('sayaç açıldı');
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Ekrani());
  }
}

class Ekrani extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final sayac = ref.watch(sayacP);
    return Scaffold(
      body: Center(child: Text('$sayac')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(sayacP).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

Test yourself

Which widget is used to access and listen to a provider in Riverpod?
- InheritedWidget
- StatefulWidget
- StatelessWidget
- ConsumerWidget
Show answer

ConsumerWidget — ConsumerWidget adds a ref parameter to the build method; thus providers are accessed with ref.watch and ref.read.

Declare a StateProvider

final sayacP = ____<int>((ref) => 0);

Show answer

final sayacP = StateProvider<int>((ref) => 0);

Riverpod basic parts

ProviderScope

Wraps the app root
Provider

Produces a read-only value
StateProvider

Holds writable state
ConsumerWidget

Accesses providers via ref

Next lesson: What is Bloc?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies