lil_snack

Description:

lil snack

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,
),
),
],
);
copied to clipboard

Wrap widget tree with LilSnackMessenger.

LilSnackMessenger(child: WidgetTree()),
copied to clipboard

To use LilSnackMessenger, access its state through the context.

LilSnackMessenger.of(context)
LilSnackMessenger.maybeOf(context)
copied to clipboard
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.',
),
);
copied to clipboard

To hide the currently displayed message.

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

To remove all messages.

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

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,
),
);
copied to clipboard

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,
),
),
);
copied to clipboard

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,
),
),
);
copied to clipboard
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.