Flutter Riverpod and Dart only

I’ve seen many articles explaining how to use Riverpod in Flutter, but I haven’t found any that explain how to use Riverpod in Dart only, so I’ll write one.

Preparation for provider automatic generation

How to create a provider using riverpod_annotation

Generating a Provider for String manipulation

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

Generating a Provider for bool toggling

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
class BoolStateManager extends _$BoolStateManager {
  @override
  bool build() {
    return false;
  }

  void toggle() {
    state = !state;
  }
}

Read Provider state of the String

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

Future<void> main() async {
    final container = ProviderContainer();
    
    final value = container.read(helloWorldProvider);
    
    print(value);
}

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
class BoolStateManager extends _$BoolStateManager {
  @override
  bool build() {
    return false;
  }

  void toggle() {
    state = !state;
  }
}

Future<void> main() async {
    final container = ProviderContainer();
    
    final value = container.read(boolStateManagerProvider);
    
    print(value);
}

In the above code ProviderContainer() gives something like ref object. Because of the this object we can get read() method just like you can read it the Flutter app.

Update provider state

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
class BoolStateManager extends _$BoolStateManager {
  @override
  bool build() {
    return false;
  }

  void toggle() {
    state = !state;
  }
}

Future<void> main() async {
    final container = ProviderContainer();
    
    final value = container.read(boolStateManagerProvider);
    
    print(value);

    
    container.read(boolStateManagerProvider.notifier).toggle();    

    final toggledValue = container.read(boolStateManagerProvider);
    
    print(toggledValue);
}

Detect provider state change

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

@riverpod
class BoolStateManager extends _$BoolStateManager {
  @override
  bool build() {
    return false;
  }

  void toggle() {
    state = !state;
  }
}

class BoolListener extends ProviderObserver {
  @override
  void didUpdateProvider(
    ProviderBase<dynamic> provider,
    Object? previousValue,
    Object? newValue,
    ProviderContainer container,
  ) {
    print('''
{
  "provider": "${provider.name ?? provider.runtimeType}",
  "newValue": "$newValue"
}''');
  }
}

Future<void> main() async {
// Add BoolListener to observers  final container = ProviderContainer(observers: [BoolListener()]);
    
  final value = container.read(boolStateManagerProvider);
    
  print(value);

//Updating here will call BoolListener#didUpdateProvide  container.read(boolStateManagerProvider.notifier).toggle();    

  final toggledValue = container.read(boolStateManagerProvider);
    
  print(toggledValue);
}