Flutter on Rails

🧭 Flutter on Rails Navigation

Overview

This document outlines the navigation system used in the Flutter on Rails. Navigation between screens in the Flutter on Rails app is controlled from Rails using the data_frails_navigation attribute embedded in links. This system allows declarative control over native Flutter navigation from within Rails views.

🔹 Supported Navigation Actions

Currently, we support two main navigation actions:

  • push – Pushes a new page onto the navigation stack.
  • replace – Replaces the current page with a new one.

⚙️ Under the hood, more actions are supported and can be extended through the API and Flutter side.

🏷️ Example Usage in Rails (ERB)

<%= link_to new_message_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: "circularReveal",
    backgroundColor: "#111827",
    leadingColor: "#111827",
    title: "Message"
  }.to_json do %>
  <span class="ml-2 p-4 bg-blue-400 rounded-2xl text-white">Contacter Nous</span>
<% end %>
Field Type Description
action String One of "push" or "replace".
navigable Boolean Indicates whether the new page should be tracked in the navigation stack.
animate String (Optional) Transition animation type (e.g., "fade", "slide", "circularReveal").
backgroundColor String (Optional) Hex color code for the background.
leadingColor String (Optional) Hex color for the app bar or navigation icon.
title String (Optional) Title to display in the Flutter app bar.

💡 Extensibility

In addition to push and replace, the system is designed to support:

  • pop: Go back to the previous screen.
  • popToRoot: Return to the root screen.
  • modal: Open a page as a modal.
  • external: Launch an external app or browser.

These actions can be triggered via the API and are partially implemented in the Flutter engine for future updates.

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 %>