Flutter on Rails

Animating Routes

✨ Animating Routes with Flutter on Rails

Overview

In Flutter on Rails, navigation transitions between screens can be enhanced with smooth animations to improve user experience. By specifying the desired animation in the data_frails_navigation attribute, you can declaratively trigger animated route transitions directly from your Rails views.

🎬 Supported Route Animations

You can choose from a variety of built-in animations supported by the Flutter side:

  • fade
  • fadeIn
  • rightToLeft
  • leftToRight
  • upToDown
  • downToUp
  • rightToLeftWithFade
  • leftToRightWithFade
  • zoom
  • cupertino
  • size
  • circularReveal

⚙️ These animations map directly to Flutter on Rails Sdk PageRouteBuilder transitions or custom animations and are applied when a route change is triggered.

🛠️ Example Usage in Rails (ERB)

Here’s how you can trigger an animated navigation from a Rails view using data_frails_navigation:

<%= link_to messages_demo_path,
  class: "flex items-center px-4 py-2 rounded-lg text-blue-600 hover:bg-blue-50 transition duration-300",
  data_frails_navigation: {
    action: "push",
    navigable: true,
    animate: "rightToLeftWithFade",
    title: "Messages Demo"
  }.to_json
  do %>
  <span class="ml-2">Form</span>
<% end %>