feat: add notification configuration

Author: funwithflutter

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.1.3
+
+- feat: add functionality to customize notification messages
+
 # 0.1.2
 
 - feat: add sign in with apple support

README.md

@@ -14,7 +14,7 @@ Pre-lit Firebase authentication. It provides a set of convenient utilities and w
   - Windows, macOS and Linux to be added in the future
 - **Multiple authentication providers**
   - Package supported: Google and Apple
-  - Please see Authentication Providers[Authentication Providers](#authentication-providers) for other sign-in providers
+  - Please see [Authentication Providers](#authentication-providers) for other sign-in providers
 - **Services and state managed for you**
   - Easily interact with Firebase from anywhere in your app
   - Monitor the auth state and react to changes
@@ -288,10 +288,19 @@ return LitAuth(
 
  ```
 
-### Dialogs
-Dialog message are rendered using the `flushbar` package. Further customization will be available in a later version.
+### Notifications
+Notifications are rendered using the [flushbar](https://pub.dev/packages/flushbar) package.
 
-**todo**: provide additional theming/overrides for dialogs.
+You can customize the error and success notifications:
+
+```dart
+LitAuth(
+  errorNotification: NotificationConfig(backgroundColor: Colors.pink),
+  successNotification: NotificationConfig(backgroundColor: Colors.pink),
+);
+```
+
+There are many attributes that can be altered to create the desired notification. Please see the `NotificationConfig` class for additional information.
 
 ### Additional Customization
 

example/pubspec.lock

@@ -211,7 +211,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.2"
+    version: "0.1.3"
   matcher:
     dependency: transitive
     description:

lib/lit_firebase_auth.dart

@@ -5,6 +5,7 @@ export 'src/domain/auth/i_auth_facade.dart';
 export 'src/infrastructure/firebase_auth_facade.dart';
 export 'src/presentation/core/auth_config.dart';
 export 'src/presentation/core/extensions.dart';
+export 'src/presentation/core/notifications.dart';
 export 'src/presentation/lit_auth_init.dart';
 export 'src/presentation/lit_auth_ui.dart';
 export 'src/presentation/widgets/sign_in_buttons.dart';

lib/src/presentation/core/notifications.dart

@@ -0,0 +1,226 @@
+import 'package:flushbar/flushbar.dart';
+import 'package:flutter/material.dart';
+
+import 'screen_sizes.dart';
+
+const double smallNotificationWidth = 300;
+const Duration notificationDuration = Duration(seconds: 3);
+
+class NotificationHelper {
+  static Flushbar error({
+    @required String message,
+    @required NotificationConfig config,
+    @required BuildContext context,
+  }) {
+    final isPhone = isPhoneSize(MediaQuery.of(context).size);
+    final width = isPhone ? null : smallNotificationWidth;
+    return Flushbar<dynamic>(
+      message: message,
+      title: config?.title,
+      titleText: config?.titleText,
+      backgroundColor: config?.backgroundColor,
+      leftBarIndicatorColor: config?.leftBarIndicatorColor,
+      boxShadows: config?.boxShadows,
+      backgroundGradient: config?.backgroundGradient,
+      icon: config?.icon ??
+          Icon(
+            Icons.warning,
+            size: 28.0,
+            color: Theme.of(context).colorScheme.error,
+          ),
+      shouldIconPulse: config?.shouldIconPulse,
+      duration: config?.duration ?? notificationDuration,
+      isDismissible: config?.isDismissible,
+      maxWidth: config?.maxWidth ?? width,
+      margin: config?.margin,
+      padding: config?.padding,
+      borderRadius: config?.borderRadius,
+      borderColor: config?.borderColor,
+      borderWidth: config?.borderWidth,
+      flushbarPosition:
+          isPhone ? FlushbarPosition.BOTTOM : FlushbarPosition.TOP,
+      dismissDirection: config?.dismissDirection,
+      flushbarStyle: FlushbarStyle.GROUNDED,
+      forwardAnimationCurve: config?.forwardAnimationCurve,
+      reverseAnimationCurve: config?.reverseAnimationCurve,
+      animationDuration: config?.animationDuration,
+      barBlur: config?.barBlur,
+      blockBackgroundInteraction: config?.blockBackgroundInteraction,
+      routeBlur: config?.routeBlur,
+      routeColor: config?.routeColor,
+    );
+  }
+
+  static Flushbar success({
+    @required String message,
+    @required NotificationConfig config,
+    @required BuildContext context,
+  }) {
+    final isPhone = isPhoneSize(MediaQuery.of(context).size);
+    final width = isPhone ? null : smallNotificationWidth;
+    return Flushbar<dynamic>(
+      message: message,
+      title: config?.title,
+      titleText: config?.titleText,
+      backgroundColor: config?.backgroundColor,
+      leftBarIndicatorColor: config?.leftBarIndicatorColor,
+      boxShadows: config?.boxShadows,
+      backgroundGradient: config?.backgroundGradient,
+      icon: config?.icon ??
+          Icon(
+            Icons.check_circle,
+            color: Colors.green[300],
+          ),
+      shouldIconPulse: config?.shouldIconPulse,
+      duration: config?.duration ?? notificationDuration,
+      isDismissible: config?.isDismissible,
+      maxWidth: config?.maxWidth ?? width,
+      margin: config?.margin,
+      padding: config?.padding,
+      borderRadius: config?.borderRadius,
+      borderColor: config?.borderColor,
+      borderWidth: config?.borderWidth,
+      flushbarPosition:
+          isPhone ? FlushbarPosition.BOTTOM : FlushbarPosition.TOP,
+      dismissDirection: config?.dismissDirection,
+      flushbarStyle: FlushbarStyle.GROUNDED,
+      forwardAnimationCurve: config?.forwardAnimationCurve,
+      reverseAnimationCurve: config?.reverseAnimationCurve,
+      animationDuration: config?.animationDuration,
+      barBlur: config?.barBlur,
+      blockBackgroundInteraction: config?.blockBackgroundInteraction,
+      routeBlur: config?.routeBlur,
+      routeColor: config?.routeColor,
+    );
+  }
+}
+
+class NotificationConfig {
+  /// The title displayed to the user
+  final String title;
+
+  /// Replaces [title]. Although this accepts a [Widget], it is meant to receive [Text] or [RichText]
+  final Widget titleText;
+
+  /// Will be ignored if [backgroundGradient] is not null
+  final Color backgroundColor;
+
+  /// If not null, shows a left vertical bar to better indicate the humor of the notification.
+  /// It is not possible to use it with a [Form] and I do not recommend using it with [LinearProgressIndicator]
+  final Color leftBarIndicatorColor;
+
+  /// [boxShadows] The shadows generated by Flushbar. Leave it null if you don't want a shadow.
+  /// You can use more than one if you feel the need.
+  /// Check (this example)[https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/shadows.dart]
+  final List<BoxShadow> boxShadows;
+
+  /// Makes [backgroundColor] be ignored.
+  final Gradient backgroundGradient;
+
+  /// You can use any widget here, but I recommend [Icon] or [Image] as indication of what kind
+  /// of message you are displaying. Other widgets may break the layout
+  final Widget icon;
+
+  /// An option to animate the icon (if present). Defaults to true.
+  final bool shouldIconPulse;
+
+  /// How long until Flushbar will hide itself (be dismissed). To make it indefinite, leave it null.
+  final Duration duration;
+
+  /// Determines if the user can swipe or click the overlay (if [routeBlur] > 0) to dismiss.
+  /// It is recommended that you set [duration] != null if this is false.
+  /// If the user swipes to dismiss or clicks the overlay, no value will be returned.
+  final bool isDismissible;
+
+  /// Used to limit Flushbar width (usually on large screens)
+  final double maxWidth;
+
+  /// Adds a custom margin to Flushbar
+  final EdgeInsets margin;
+
+  /// Adds a custom padding to Flushbar
+  /// The default follows material design guide line
+  final EdgeInsets padding;
+
+  /// Adds a radius to all corners of Flushbar. Best combined with [margin].
+  /// I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor].
+  final double borderRadius;
+
+  /// Adds a border to every side of Flushbar
+  /// I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor].
+  final Color borderColor;
+
+  /// Changes the width of the border if [borderColor] is specified
+  final double borderWidth;
+
+  /// Flushbar can be based on [FlushbarPosition.TOP] or on [FlushbarPosition.BOTTOM] of your screen.
+  /// [FlushbarPosition.BOTTOM] is the default.
+  final FlushbarPosition flushbarPosition;
+
+  /// [FlushbarDismissDirection.VERTICAL] by default.
+  /// Can also be [FlushbarDismissDirection.HORIZONTAL] in which case both left and right dismiss are allowed.
+  final FlushbarDismissDirection dismissDirection;
+
+  /// Flushbar can be floating or be grounded to the edge of the screen.
+  /// If grounded, I do not recommend using [margin] or [borderRadius]. [FlushbarStyle.FLOATING] is the default
+  /// If grounded, I do not recommend using a [backgroundColor] with transparency or [barBlur]
+  final FlushbarStyle flushbarStyle;
+
+  /// The [Curve] animation used when show() is called. [Curves.easeOut] is default
+  final Curve forwardAnimationCurve;
+
+  /// The [Curve] animation used when dismiss() is called. [Curves.fastOutSlowIn] is default
+  final Curve reverseAnimationCurve;
+
+  /// Use it to speed up or slow down the animation duration
+  final Duration animationDuration;
+
+  /// Default is 0.0. If different than 0.0, blurs only Flushbar's background.
+  /// To take effect, make sure your [backgroundColor] has some opacity.
+  /// The greater the value, the greater the blur.
+  final double barBlur;
+
+  /// Determines if user can interact with the screen behind it
+  /// If this is false, [routeBlur] and [routeColor] will be ignored
+  final bool blockBackgroundInteraction;
+
+  /// Default is 0.0. If different than 0.0, creates a blurred
+  /// overlay that prevents the user from interacting with the screen.
+  /// The greater the value, the greater the blur.
+  /// It does not take effect if [blockBackgroundInteraction] is false
+  final double routeBlur;
+
+  /// Default is [Colors.transparent]. Only takes effect if [routeBlur] > 0.0.
+  /// Make sure you use a color with transparency here e.g. Colors.grey[600].withOpacity(0.2).
+  /// It does not take effect if [blockBackgroundInteraction] is false
+  final Color routeColor;
+
+  const NotificationConfig({
+    this.title,
+    this.titleText,
+    this.backgroundColor = const Color(0xFF303030),
+    this.leftBarIndicatorColor,
+    this.boxShadows,
+    this.backgroundGradient,
+    this.icon,
+    this.shouldIconPulse = true,
+    this.duration,
+    this.isDismissible = true,
+    this.maxWidth,
+    this.margin = const EdgeInsets.all(0.0),
+    this.padding = const EdgeInsets.all(16),
+    this.borderRadius = 0.0,
+    this.borderColor,
+    this.borderWidth = 1.0,
+    this.flushbarPosition = FlushbarPosition.BOTTOM,
+    this.dismissDirection = FlushbarDismissDirection.VERTICAL,
+    this.flushbarStyle = FlushbarStyle.GROUNDED,
+    this.forwardAnimationCurve = Curves.easeOutCirc,
+    this.reverseAnimationCurve = Curves.easeOutCirc,
+    this.animationDuration = const Duration(seconds: 1),
+    this.barBlur = 0.0,
+    this.blockBackgroundInteraction = false,
+    this.routeBlur,
+    this.routeColor,
+  });
+}

lib/src/presentation/core/screen_sizes.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/widgets.dart';
+
+const kTabletBreakpoint = 720.0;
+const kDesktopBreakpoint = 1400.0;
+
+bool isPhoneSize(Size screenSize) {
+  return screenSize.width < kTabletBreakpoint;
+}