DISCOVER FLUTTER — WEEK #25

Animations Flutter Package

Contains animations for commonly-desired effects

The Flutter team last year shipped a new stable version of its cross-platform mobile framework. This new version includes a lot of new features, and in this article, I want to pay attention to its animations package.

This package allows developers to implement commonly desired animation patterns in mobile app development.

There are currently four transition patterns available in the package:

  1. Container transform
  2. Shared axis transition
  3. Fade through transition
  4. Fade transition

Container Transform

According to the specification the container transform pattern is designed for transitions between UI elements that include a container. This pattern creates a visible connection between two UI elements.

The container is the main element that holds the outgoing and incoming elements and whose dimensions and position change, in other words, it is a container that grows to fill the screen to reveal new content when tapped. Similar to a Hero widget.

Shared Axis Transition

In the documentation, they explained transition where the shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.

Use this page route for pages that are related to one another (login, onboarding pages, etc).

Fade Through Transition

The fade-through pattern is used for transitions between UI elements that do not have a strong relationship to each other.

This transition is a page route that is recommended for pages that have no strong relationship to each other.

Fade

The fade pattern is used for UI elements that enter or exit within the bounds of the screen, such as a dialog that fades in the center of the screen.

This is a modal page route, recommended for dialogs because this animation provides fade effects:

  • Elements that enter use a quick fade in and scale from 80% to 100%
  • Elements that exit simply fade out

Conclusion

If you’re a fan of short, interesting articles covering various Flutter topics and you want to get into the habit of learning Flutter with me over the next five weeks, you can read my articles every Tuesday.

If you have any questions or comments about this article, let me know in the comments section.

For those who want to jump into our Flutter journey, links from the previous weeks can be found below:

  • Week #22 — “Change Screen Orientation In Flutter”
  • Week #23 — “My February Recommendations for Flutter Packages”
  • Week #24 — “Flutter Roadmap 2021 and Flutter Engage Event”

See you next week, don’t break the streak!

On my journey to become a Flutter dev I will be sharing knowledge by writing short texts about what new know-how’s I’ve learned, in the next 30 weeks.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store