Flutter on Rails Documentation

Overview

The Dialog Animation System in Flutter on Rails provides animated transitions for displaying dialog components in the Flutter WebView app. This system allows for a variety of entry animations to enhance the user experience.

🧩 Supported Dialog Animations

The dialog component supports the following animations:

Animation	Description
`rotate`	Rotates the dialog upon entry.
`scale`	Scales the dialog from small to full size.
`right`	Animates the dialog from the right side of the screen.
`left`	Animates the dialog from the left side of the screen.
`downToUp`	Animates the dialog from the bottom to the top of the screen.
`topToDown`	Animates the dialog from the top to the bottom of the screen.

You can specify the desired animation when triggering the dialog from Rails, and the Flutter WebView app will handle the transition.

🎯 Example Usage

To display a dialog with animation, you can send the payload with the animate property specifying the desired animation:

const payload = {
  component: "dialog",
  title: "Flutter on Rails",
  content: "Welcome to Flutter on Rails !!!",
  animate: "left" // Example: Animation from the left
};

window.flutter_on_rails.callHandler('Flutter', JSON.stringify(payload));

🚀 How to Apply Animations

Set the animate field in the dialog payload to one of the supported animation types (e.g., rotate, scale, left, right, downToUp, or topToDown).
The dialog will automatically animate with the specified transition when it appears in the Flutter app.

⚙️ Integration Notes

The dialog payload can be sent using the window.flutter_on_rails.callHandler method.
The component field must be set to "dialog" to trigger the dialog.
The animate field determines which animation effect will be applied to the dialog.

For example:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
  }

  sendDataToFlutter() {
    // Ensure you are using the correct method for flutter_on_rails
    if (window.flutter_on_rails) {
      const payload = {
        component: "dialog",
        title: "Flutter on Rails",
        content: "Welcome to Flutter on rails !!!",
        animate: "left"
      }
      window.flutter_on_rails.callHandler('Flutter', JSON.stringify(payload));
    } else {
      console.error("Flutter on Rails  handler not available");
    }
  }
}

💡 Future Extensions

More animations can be added to the dialog system in the future. Stay tuned for updates!