Riverpod Messages Listener: A message notification listener for apps build with Riverpod

Overview

Riverpod Messages Listener

Hello all, this is the home page of riverpod_messages package, a message notification listener for apps build with Riverpod.

Who is this package for

This package is useful for displaying error or information messages to the user sent from our StateNotifiers o ChangeNotifiers.

Some of the way this package can be used are:

Error handling (local or global)

This package is helpful for manage all the exceptions that can be thrown across our StateNotifiers or ChangeNotifiers for example for internal errors or api calls. Automatically this package listen the notifier and knows when to show a message to the user.

We can use as many as MessageListener we want, so we could use a MessageListener for every Notifier or we can make a global error handling by creating an appropriate notifier and then wrap the whole app with MessageListener

In app notifications

If we want to send a success message or a notification to the user from our notifiers this package can help us. Thanks to Riverpod it doesn't matter from where we send the message, this will be displayed to the user.

How it works

This package expose a widget, the MessageListener which ask us for a provider that can be a StateNotifierProvider or a ChangeNotifierProvider and provide us two methods to do something when an error occur or when an information message gets generated.

Internally this widget looks for a variable called "error" for displaying errors and a variable called "info" for displaying informations and it will search for this variable inside the State in case of StateNotifier or inside the class in case of ChangeNotifier.

This behavior can be customized using the method "errorExtractor" and "infoExtractor" exposed by the MessageListener with which we can tell the MessageListener how to search the error and information to display

In this way this package does not enforce our way to write State/Change Notifiers with mixins or abstract classes, but it try to find the messages to display automatically.

UI

This package give use already two implementations of the MessageListener widget

  • The MessageSnackbarListener that will use a Snackbar to display the messages
  • The MessageOverlayListener that will use the Overlay api to display messages

Of course you can fork and send PRs if you want to use other way to display messages! It's just a matter of wrap MessageListener and customize showError and showInfo methods!

Examples

You can download the project and run example project inside

StateNotifier

This is a sample StateNotifier

class ExampleStateNotifierState {
  final String? error;
  final String? info;
  /// .... other properties of the state
  final bool loading;

  const ExampleStateNotifierState({this.loading = false, this.error, this.info});

  ExampleStateNotifierState copyWith({
    String? error,
    String? info,
    bool? loading
  }) {
    return ExampleStateNotifierState(
      error: error ?? this.error,
      info: info ?? this.info,
      loading: loading ?? this.loading
    );
  }

}

class ExampleStateNotifier extends StateNotifier<ExampleStateNotifierState> {
  ExampleStateNotifier(): super(const ExampleStateNotifierState());

  Future<void> simulateError() async {
    state = state.copyWith(loading: true, error: '');

    // simulate a job
    await Future.delayed(const Duration(seconds: 1));

    state = state.copyWith(loading: false, error: 'Ooops! An error has occurred! [StateNotifier]');
  }

  Future<void> simulateInfo() async {
    state = state.copyWith(loading: true, info: '');

    // simulate a job
    await Future.delayed(const Duration(seconds: 1));
    state = state.copyWith(loading: false, info: 'You received a new message! [StateNotifier]');
  }
}

final exampleStateNotifierProvider = StateNotifierProvider<ExampleStateNotifier, ExampleStateNotifierState>((_) => ExampleStateNotifier());

And then in your page

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('State Notifier with Snackbar'),
        ),
        body: MessageSnackbarListener( // This is the listener
            provider: exampleStateNotifierProvider,
            child: Center(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
              ElevatedButton(
                  child: const Text('Simulate error message'),
                  style: ElevatedButton.styleFrom(primary: Colors.red),
                  onPressed: () {
                    ref.read(exampleStateNotifierProvider.notifier).simulateError();
                  }),
              ElevatedButton(
                  child: const Text('Simulate information message'),
                  onPressed: () {
                    ref.read(exampleStateNotifierProvider.notifier).simulateInfo();
                  }),
              ref.watch(exampleStateNotifierProvider.select((value) => value.loading))
                  ? const CircularProgressIndicator()
                  : Container()
            ]))));
  }
}
You might also like...

Messenger is an instant messaging app & by using this you can send message to your friend and family virtually

⚡️ Flash Chat ⚡️ Our Goal 🍁 The objective of this project is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Clou

Jun 19, 2022

This is a message/chat app with light and dark theme options

This is a message/chat app with light and dark theme options

this is a message/chat app #ui using #flutter that runs both Android and iOS devices also has a dark and light theme. We create in total 4 screens all

Dec 30, 2022

A full-featured (simple message, voice, video) flutter chat application by SignalR and WebRTC

A full-featured (simple message, voice, video) flutter chat application by SignalR and WebRTC

flutter_chat A full-featured (simple message, voice, video) flutter chat application by SignalR and WebRTC. Features Full Authentication service Bad r

Dec 11, 2022

Flutter Instagram Notification Page UI - Day 32

Flutter Instagram Notification Page UI - Day 32

Flutter Instagram Notification Page UI - Day 32 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter In

Dec 17, 2022

A Flutter application which keeps track your water intake and remind you to drink water by sending notification

A Flutter application which keeps track your water intake and remind you to drink water by sending notification

Drinkable 🌊 Drinkable 🌊 Built with ❤︎ by Akash Debnath Drinkable is a Flutter App powered by Firebase to keep track your daily water intake and remi

Nov 29, 2022

This app has the signup, campaign and notification page(Inspiration from dribble.com)

sitting_design A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Aug 4, 2022

Push notification in Flutter using Firebase.

push_notification [1]Firebase Integration in Flutter project. [2]Parsing message in the app using on Message Stream while the app is foreground. [3]Ha

Dec 29, 2021

Flutter Dropdown Alert help to notify to user when success, warning or error like push notification

Flutter Dropdown Alert help to notify to user when success, warning or error like push notification

flutter_dropdown_alert A dropdown alert package for flutter Dropdown alert will help to notify to user when you call api success, error or something l

Dec 17, 2022
Owner
Fabrizio Tognetto
Fabrizio Tognetto
Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

CU Apps 4 May 5, 2022
Toast Library for Flutter, Easily create toast messages in single line of code

Create Toast messages on a Flutter Event. fluttertoast: ^8.0.8 Toast Library for Flutter, Easily create Personalised toast messages in single line of

Bouziani Mohammed 1 Feb 14, 2022
Display multiple simple messages at a same time.

Simple multipurpse flashes to announce different messages to the user and interact with them. Display multiple flashes at the same time and avoid writ

Hassan Emami 3 Oct 10, 2022
Push Notification service for anime episodes and news. The episode updates will be based on actual upload on the internet and NOT Japan tv schedule as other apps do.

Quantz Push Notification service for anime episodes and news. Features Sub and dub - get notified with latest anime episodes on the internet. Ongoing

null 18 Nov 21, 2022
Build an example app for receiving notification from Firebase Cloud Messaging (FCM)

notify Build an app demo for receiving notifications from Firebase Cloud Messaging. Check more information: https://firebase.google.com/docs/cloud-mes

TAD 3 Dec 9, 2022
Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github_apps Inspiration This app is made to build using bloc 8.0 and github API.

Irvan Lutfi Gunawan 18 Apr 14, 2022
FlutterToast - Flutter application to show Android's Toast Message

Android's Toast Message in Flutter Flutter application to show Android's Toast Message. Methods and code to Show Toast message in flutter. To show Toa

Uttam 4 Dec 16, 2022
Send-a-msg - Send message to WhatsApp without saving number

Send A Message Send Message to Whatsapp without saving number ToDo add logging s

Sujal 3 Apr 3, 2022
D info - Flutter package for response info message

D'Info Flutter package for response info message. It's like bootstrap view but s

Indra Trisna Raharja 4 Oct 26, 2022
Messenger is an instant messaging app & by using this you can send message to your friend and family virtually

⚡️ Flash Chat ⚡️ Our Goal ?? The objective of this project is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Clou

Prashant Kumar Singh 7 Dec 3, 2022