Flutter Riverpod State Management Explained

• Hello world (Provider)
• Selected button (State Provider)
• Counter (Change Notifier)
• Todo (State Notifier Provider)
• Loading (Stream Provider)
• HTTP call (Future Provider)

Before we start

flutter_riverpod: ^0.14.0+1

void main() {
  runApp(ProviderScope(child: MyApp()));
}

Reading Providers

• Consumer: is a widget that can be placed anywhere within the widget tree. It has a builder property that exposes a function called watch. Using watch we can listen to and access providers. This is best used if you want to render a certain part of a widget without rerendering all of it.
• ConsumerWidget: is a base-class for Widgets similar to StatelessWidget. This class also exposes the watch function but a change on a watched provider will cause the entire widget to rebuild. (Might be less efficient if used incorrectly)

Provider

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 1
final hellowWorldProvider = Provider<String>((ref) => "Hello world");

// 2
class HelloWorld extends ConsumerWidget {
  const HelloWorld({Key key}) : super(key: key);

  @override
  // 3
  Widget build(BuildContext context, ScopedReader watch) {
    // 4
    String text = watch(hellowWorldProvider);
    return Text(text);
  }
}

1. We declare a global string provider (they are immutable, it's like declaring a function). A provider takes a function that creates the shared state and receives the ref object. This ref object can be used to watch and read other providers within the one being created. We will take a look at this in a bit
2. Riverpod has ConsumerWidget which is basically a stateless widget that allows us to listen to a provider, so the UI can automatically update the component when needed
3. Because we extend ConsumerWidget our build method would require a ScopedReader object. This is what allows us to listen to a provider using watch
4. We declare a string that takes the value of our hellowWorldProvider.

State Provider

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 1
final selectedButtonProvider = StateProvider<String>((ref) => '');
// 2
final isRedProvider = Provider<bool>((ref) {
  final color = ref.watch(selectedButtonProvider).state;
  return color.state == 'red'; // true if red
});

class SelectedButton extends ConsumerWidget {
  const SelectedButton({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // 3
    final selectedButton = watch(selectedButtonProvider).state;
    // 4
    final isRed = watch(isRedProvider);

    return Column(
      children: [
        Text(selectedButton),
        TextButton(
          // 5
          onPressed: () => context.read(selectedButtonProvider).state = 'red',
          child: Text('Red'),
        ),
        TextButton(
          // 5
          onPressed: () => context.read(selectedButtonProvider).state = 'blue',
          child: Text('Blue'),
        ),
        // 6
        isRed ? Text('Color is red') : Text('Color is not red')
      ],
    );
  }
}

1. Similar to a normal Provider we create a global string StateProvider that has an empty string as its default value
2. We create a boolean Provider that uses the ref object to watch the selectedButtonProvider and return whether it's red or not. This refreshes the UI whenever our state provider value changes because it is dependant on it.
3. We declare the variable selectedButton that watches the selectedButtonProvider's state
4. We declare a boolean that watches the basic isRedProvider
5. We use context.read(selectedButtonProvider) to access the state of the provider without listening to it and change its value. We do this because we are not supposed to listen inside a button's onPressed (or similar) calls.
6. We use the value from the basic provider to show the right text.

Change Notifier Provider

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  int count;
  // 1
  Counter([this.count = 0]);

  // 2
  void increment() {
    count++;
    notifyListeners();
  }
}

1. We create a constructor that takes in a count or defaults to 0 if no value was provided
2. This increment() method increments the count and notifies the listeners. If we just change the count without notifying then any widget that listens to this provider does not rebuild.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// import counter class here

// 1
final counterProvider = ChangeNotifierProvider<Counter>((ref) => new Counter());

class CounterWidget extends ConsumerWidget {
  const CounterWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // 2
    final count = watch(counterProvider).count;
    return Column(
      children: [
        Text(count.toString()),
        TextButton(
          // 3
          onPressed: () {
            context.read(counterProvider).increment();
          },
          child: Text('+'),
        )
      ],
    );
  }
}

1. We declare a ChangeNotifierProvider of type Counter and return a new Counter object on creation.
2. We watch (listen) to the count in our counterProvider
3. When pressing the button we use the appropriate way to access a provider within a button onPressed call and increment. Which will trigger the notifyListeners and causes the UI to rebuild this widget.

onPressed: () {
  context.read(counterProvider).count = count + 1; // New Line
  context.read(counterProvider).increment();
},

State Notifier Provider

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1
class Todo {
  num id;
  String title;
  bool completed;
  Todo({this.id, this.title, this.completed = false});
}

// 2
class TodoList extends StateNotifier<List<Todo>> {
  // 3
  TodoList([List<Todo> todos]) : super(todos ?? []);

  // 4
  void add(String title) {
    state = [...state, new Todo(id: state.length + 1, title: title)];
  }

  // 4
  void toggle(num id) {
    state = [
      for (final todo in state)
        if (todo.id == id)
          Todo(
            id: todo.id,
            completed: !todo.completed,
            title: todo.title,
          )
        else
          todo,
    ];
  }

  // 4
  void edit(Todo updatedTodo) {
    state = [
      for (final todo in state)
        if (todo.id == updatedTodo.id)
          Todo(
            id: todo.id,
            completed: todo.completed,
            title: updatedTodo.title,
          )
        else
          todo,
    ];
  }

  // 4
  void remove(num id) {
    state = state.where((todo) => todo.id != id).toList();
  }
}

1. We create a simple todo class with an id, title and a completed flag
2. We create a class that extends StateNotifier and is of type List<Todo>. This will define the state type of this TodoList object.
3. We define the constructor that takes in a list of todos as an argument but if it is not provided then we set our state to an empty list. To access the todos in our class we will use state which can be accessed due to us extending StateNotifier
4. In our functions we assign different values to our state but we always override its value, state = that is because it is immutable. If we change the add function to have something like state[state.length] = new Todo(id: state.length + 1, title: title); This would not trigger a state change and UI does not rebuild.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_state_management/models/todo.dart';

// 1
final todoListProvider = StateNotifierProvider<TodoList, List<Todo>>((ref) {
  return TodoList();
});

class TodoWidget extends ConsumerWidget {
  const TodoWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // 2
    final todoList = watch(todoListProvider);
    return Column(
      children: [
        Container(
          height: 100,
          child: ListView.builder(
            itemCount: todoList.length,
            itemBuilder: (BuildContext context, int index) {
              Todo todo = todoList[index];
              return ListTile(
                title: Text(todoList[index].title),
                leading: IconButton(
                  icon: Icon(Icons.edit),
                  // 3
                  onPressed: () {
                    todo.title = 'Updated Title';
                    context.read(todoListProvider.notifier).edit(todo);
                  },
                ),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  // 3
                  onPressed: () =>
                      context.read(todoListProvider.notifier).remove(todo.id),
                ),
              );
            },
          ),
        ),
        TextButton(
          // 3
          onPressed: () =>
              context.read(todoListProvider.notifier).add('New Item'),
          child: Text('Add'),
        ),
      ],
    );
  }
}

1. We declare a StateNotifierProvider that returns a new TodoList object on creation
2. When we use a StateNotifierProvider we watch todoListProvider.state. Trying to access the immutable state from the outside will result in a warning. This is to make sure we do not modify the state from anywhere but the class itself.
3. When triggering actions we use the appropriate way to access a provider within a button onPressed call and perform our state changes that will change the state of the TodoList class and trigger a UI rebuild.

Stream Provider

import 'dart:async';

class LoadingProcessor {
  LoadingProcessor() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      if (controller.isClosed) {
        timer.cancel();
      } else {
        controller.sink.add(loading);
        loading += 10;
      }
    });
  }
  final controller = StreamController<int>();
  var loading = 0;
  Stream<int> get stream => controller.stream;
}

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// import the loading processor here

// 1
final loadingProvider = StreamProvider.autoDispose<int>((ref) async* {
  final loadingProcessor = LoadingProcessor();
  // 2
  ref.onDispose(() => loadingProcessor.controller.sink.close());
  // 3
  await for (final value in loadingProcessor.stream) {
    if (value == 100) {
      loadingProcessor.controller.sink.close();
    }
    // 4
    yield value;
  }
});

class LoadingWidget extends ConsumerWidget {
  LoadingWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // 5
    AsyncValue<int> loading = watch(loadingProvider);
    // 6
    return loading.when(
      // 7
      data: (percent) {
        return Text("loading is $percent");
      },
      // 8
      loading: () => const CircularProgressIndicator(),
      // 9
      error: (err, stack) => Text('Error: $err'),
    );
  }
}

1. We create a StreamProvider with an autoDispose modifier. This modifier allows us to destroy the state of a provider when it is no longer used and gives us access to the onDispose call on ref. An example of when this might be needed is by closing a connection to firebase to avoid unnecessary calls.
2. We use the onDispose to close the stream.
3. We listen to values that are emitted from loadingProcessor.stream in a for loop and then perform the actions needed.
4. We then yield the value that the stream provides emits. (yield is like return in a stream async function)
5. We listen to the provider the loadingProvider that returns an AsyncValue.
6. By returning loading.when() we allow the UI to automatically rebuild when the data changes or new value is emitted from the stream to the provider.
7. Data is provided when everything succeeds and we have no errors
8. Loading is returned when the provider does not have any initial data and is waiting for the stream to yield something
9. Error is what is returned when an error occurs

Future Provider

import 'dart:convert';

import 'package:http/http.dart' as http;

class Address {
  Address();

  Future<String> getAddress() async {
    final resp = await http.get(
        "<https://my-json-server.typicode.com/refactord/deep-dive-db/addresses>");
    if (resp.statusCode == 200) {
      return jsonDecode(resp.body).toString();
    } else {
      throw Exception('Failed to load album');
    }
  }
}

 http: ^0.12.2

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// import the address class here

// 1
final addressProvider = FutureProvider<String>((ref) async {
  return Address().getAddress();
});

class HttpRequestWidget extends ConsumerWidget {
  HttpRequestWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    AsyncValue<String> address = watch(addressProvider);
    // 2
    return address.when(
      data: (data) {
        return Text(data.toString());
      },
      loading: () => const CircularProgressIndicator(),
      error: (err, stack) => Text('Error: $err'),
    );
  }
}

1. We create our address provider. (FutureProvider. autoDispose is not used here but it can be used to stop any ongoing HTTP calls if a user leaves the page that made the call).
2. Just like stream provider, we listen to the changes on FutureProvider by calling .when on our async value and return what's appropriate based on the data.

Conclusion