lil_snack 1.1.1

Package for displaying messages to the user. You can set basic message styles and easily show beautiful alerts to the user. You can also create your own unique alerts.

Lil Snack

Package for displaying messages to the user.

You can set basic message styles and easily show beautiful alerts to the user.

You can also create your own unique alerts.

Getting started

• Add to app theme LilSnackTheme as extension. All fields must not be null, except boxShadow and borderRadius.

ThemeData.light().copyWith(
          extensions: [
            LilSnackTheme(
              successIconColor: Colors.white,
              warningIconColor: Colors.white,
              errorIconColor: Colors.white,
              notificationIconColor: Colors.black,
              successBackgroundColor: Colors.green,
              warningBackgroundColor: Colors.deepOrange.shade300,
              errorBackgroundColor: Colors.red,
              notificationBackgroundColor: Colors.grey.shade300,
              borderRadius: BorderRadius.circular(16),
              boxShadow: null,
              iconSize: 24,
              successTextStyle: const TextStyle(
                fontSize: 16,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
              warningTextStyle: const TextStyle(
                fontSize: 16,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
              errorTextStyle: const TextStyle(
                fontSize: 16,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
              notificationTextStyle: const TextStyle(
                fontSize: 16,
                color: Colors.black,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        );

• Wrap widget tree with LilSnackMessenger.

     LilSnackMessenger(child: WidgetTree()),

• To use LilSnackMessenger, access its state through the context.

    LilSnackMessenger.of(context)
    LilSnackMessenger.maybeOf(context)

Usage

• To display a default message customized by theme.

  /// Adds a success message to the queue.
  void _showSuccess(BuildContext context) => LilSnackMessenger.of(context).show(
        const LilSnack(
          type: LilSnackType.success,
          text: 'Success message.',
        ),
      );

• To hide the currently displayed message.

  /// Hides current message.
  void _hide() => LilSnackMessenger.of(context).hide();

• To remove all messages.

  /// Removes all messages.
  void _removeAll() => LilSnackMessenger.of(context).removeAll();

• To remove all messages and add message to queue. Use this method instead of removeAll and then show.

  /// Removes all messages and adds message to queue.
  ///
  /// Use this method instead of ```removeAll``` and then ```show```.
  void _removeAllAndShow(BuildContext context) =>
      LilSnackMessenger.of(context).removeAllAndShow(
        const LilSnack(
          type: LilSnackType.notification,
          text: 'Remove all and show example.',
          showIcon: false,
        ),
      );

• To show custom message.

  // These two messages will be considered the same if you remove the keys
  // from the widgets being passed.
  //
  // Therefore, set the keys for the passed widgets.

  /// Adds a welcome message to the queue.
  void _showWelcome(BuildContext context) => LilSnackMessenger.of(context).show(
        CustomLilSnack(
          leading: CupertinoButton(
            key: const Key('welcome-button'),
            onPressed: () => debugPrint("Welcome!"),
            minSize: 20,
            padding: EdgeInsets.zero,
            child: const Text('Say "Welcome!"'),
          ),
          content: const Text(
            key: Key('welcome-text'),
            'Welcome!',
            maxLines: 1,
            textAlign: TextAlign.right,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 20,
              letterSpacing: 1.4,
              color: Colors.white,
              fontWeight: FontWeight.w900,
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.blueAccent.shade200,
            borderRadius: BorderRadius.circular(4),
          ),
          dismissDirection: DismissDirection.startToEnd,
          // Custom animation.
          animationBuilder: (context, lilSnack, animation) => SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(1, 0),
              end: Offset.zero,
            ).animate(animation),
            child: lilSnack,
          ),
        ),
      );

  /// Adds a goodbye message to the queue.
  void _showGoodbye(BuildContext context) => LilSnackMessenger.of(context).show(
        CustomLilSnack(
          leading: CupertinoButton(
            key: const Key('goodbye-button'),
            onPressed: () => debugPrint("Goodbye!"),
            minSize: 20,
            padding: EdgeInsets.zero,
            child: const Text('Say "Goodbye!"'),
          ),
          content: const Text(
            key: Key('goodbye-text'),
            'Goodbye!',
            maxLines: 1,
            textAlign: TextAlign.right,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 20,
              letterSpacing: 1.4,
              color: Colors.white,
              fontWeight: FontWeight.w900,
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.blueAccent.shade200,
            borderRadius: BorderRadius.circular(4),
          ),
          dismissDirection: DismissDirection.endToStart,
          // Custom animation.
          animationBuilder: (context, lilSnack, animation) => SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(-1, 0),
              end: Offset.zero,
            ).animate(animation),
            child: lilSnack,
          ),
        ),
      );

• To show a custom child message.

  /// Adds a custom child message to the queue.
  void _showCustomChild(BuildContext context) =>
      LilSnackMessenger.of(context).show(
        CustomChildLilSnack(
          child: DecoratedBox(
            key: const Key('red-box'),
            decoration: const BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(24),
                bottomRight: Radius.circular(24),
              ),
            ),
            child: SizedBox.fromSize(
              size: const Size.fromHeight(150),
            ),
          ),
          // Custom animation.
          animationBuilder: (context, lilSnack, animation) => SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(0, -1),
              end: Offset.zero,
            ).animate(animation),
            child: lilSnack,
          ),
        ),
      );

Uniqueness of messages

To keep your message unique, add a key to the passed widgets, such as an action, content, icon or child. Otherwise, the message uniqueness check will not work correctly.

Additional information

For a better understanding of how to use the package, see the example app.