preface

We usually use toast (also called toast) to display information such as network request errors, verification errors and so on. Most App toasts are simple, with a simple translucent black background and white text, like the one below.To be honest, the toast experience was terrible. If you’re a novice user, they don’t know where Toast is coming from, and when something goes wrong, when it flashes up, they may disappear before they get to the point of the content (especially if they’re trying to capture a screenshot of a mistake). This is because, for one thing, such toasts are usually small, but the dynamic effect is very simple, which is used to remind people that they are not particularly good. How to break? Here is a very interesting toast componentmotion_toast.

Motion_toast introduction

As the name suggests, Motion_toast supports motion effects, but it also has a very high level of appearance. Here is an example of motion_toast. Take a closer look at the little alarm clock icon. This kind of reminder is much more eye-catching and interesting than the usual toast.Let’s look at the features of Motion_toast:

  • Animated ICONS can be used to achieve dynamic effects;
  • Built-in success, warning, error, reminder, and delete types;
  • Support customization;
  • Support different theme colors;
  • Support for NULL safety;
  • Heartbeat animation effect;
  • Fully customized text content;
  • Built-in animation effects;
  • Support for custom layouts (LTR and RTL);
  • Custom duration;
  • Custom display position (center, bottom or top);
  • Support long text display;
  • Custom background styles;
  • Custom vanishing form.

As you can see, in addition to being able to use out of the box, we can also customize toast to enrich the style and make it more interesting.

The sample

With that out of the way, let’s take a look at some typical examples, starting with adding the dependency motion_toast: ^2.0.0 to pubspec.yaml (the lowest Dart version requires 2.12).

Simplest use

All it takes is one line of code! The other parameters are default in success’s named constructor, so using them is simple.

MotionToast.success(description: 'Operation successful! ').show(context);
Copy the code

Other built-in reminders

Built-in reminders also allow us to modify default parameters for style adjustments such as title, position, width, display position, animation curve, and so on.

// Error message
MotionToast.error(
  description: 'Error! ',
  width: 300,
  position: MOTION_TOAST_POSITION.center,
).show(context);

// Delete the prompt
MotionToast.delete(
  description: 'Deleted successfully',
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromLeft,
  animationCurve: Curves.bounceIn,
).show(context);

// Message alert (with title)
 MotionToast.info(
  description: 'This is a reminder that there could be many lines. Toast automatically adjusts height display ',
  title: 'remind',
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromBottom,
  animationCurve: Curves.linear,
  dismissable: true.).show(context);
Copy the code

One thing to note though is that the dismissable parameter is only useful to dismissable that position at the bottom; when dismissable is true, clicking on the white space makes the toast disappear prematurely. Position and animationType are mutually exclusive. AnimationType cannot be fromTop when displayed at the bottom, and animationType cannot be fromBottom when displayed at the top.

void _assertValidValues() {
  assert( (position == MOTION_TOAST_POSITION.bottom && animationType ! = ANIMATION.fromTop) || (position == MOTION_TOAST_POSITION.top && animationType ! = ANIMATION.fromBottom) || (position == MOTION_TOAST_POSITION.center), ); }Copy the code

Custom toast

Customization is essentially building an instance with MotionToast, where the description, icon and primaryColor parameters are mandatory. A lot of custom parameters, use the time recommended to see the source notes.

MotionToast(
  description: 'This is a custom toast',
  icon: Icons.flag,
  primaryColor: Colors.blue,
  secondaryColor: Colors.green[300],
  descriptionStyle: TextStyle(
    color: Colors.white,
  ),
  position: MOTION_TOAST_POSITION.center,
  animationType: ANIMATION.fromRight,
  animationCurve: Curves.easeIn,
).show(context);
Copy the code

The following is an explanation of some of the user-defined parameters:

  • icon: icon, IconData class, can use the system font icon;
  • primaryColor: main color, that is, the large background color;
  • secondaryColor: Secondary color, which is the color of the icon and the bar next to it;
  • descriptionStyle: toast text font style;
  • title: title text;
  • titleStyle: Title text style;
  • toastDuration: Display duration;
  • backgroundType: Background type, enumeration value, three optional values,transparent.solidandlighterThe default islighter.lighterIn fact, a white background is added, and then the original background color (main color) with some transparency overlaid on top, so it will look white.
  • onClose: Close callback, which can be used to show multiple errors in sequence, or to trigger certain actions after closing, such as returning to the previous page.

conclusion

After watching the previous toast, did you think it was ugly? Use motion_toast for a more interesting one. In addition, the entire motion_toast source code is not very much, so if you are interested in reading the source code, it is also a good idea to learn about the toast implementation.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!