📱 Flutter on Rails - Widget Parser

Overview

Flutter on Rails provides a powerful widget parser that allows you to build your UI directly using JSON. This system makes it easier to define Flutter widgets and manage UI components dynamically from Rails. With the widget parser, you can construct complex UIs without writing Flutter code directly, leveraging JSON to define widget properties, actions, and layouts.

🚀 Widget Parser Usage

You can send structured JSON to Flutter via the window.flutter_on_rails.callHandler method. The JSON defines the UI components, including their properties, styles, and actions. Here's how to structure your JSON for creating various widgets.

🧩 Example: AppBar with ElevatedButton and Icon

In this example, we define an AppBar with a Text widget as the title and an ElevatedButton containing an Icon as an action:

JavaScript Code

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

export default class extends Controller {
  connect() {
    if (window.flutter_on_rails) {
      window.flutter_on_rails.callHandler('Flutter', JSON.stringify({
        "type": "AppBar",
        "backgroundColor": "#4179AF",
        "title": {
          "type": "Text",
          "data": "Flutter on Rails",
          "style": {
            "color": "#ffffff",
            "fontSize": 20.0
          }
        },
        "actions": [
          {
            "type": "Container",
            "width": 40.0,
            "height": 40.0,
            "margin": "10.0,0,10.0,0",
            "child": {
              "type": "ElevatedButton",
              "color": "ff2196f3",
              "disabledColor": null,
              "disabledElevation": null,
              "disabledTextColor": null,
              "elevation": null,
              "click_event": "route:/productDetail?goods_id=123",
              "padding": "0.0,0.0,0.0,0.0",
              "splashColor": null,
              "textColor": null,
              "child": {
                "type": "Icon",
                "data": "list",
                "size": 25.0,
                "color": null,
                "semanticLabel": null,
                "textDirection": null
              }
            }
          }
        ]
      }));
    }
  }
}

🔧 Key Components of the JSON

Type

The type field defines the widget type. Some examples of widget types include:

• AppBar
• Text
• ElevatedButton
• Container
• Icon

Properties

Each widget can have a set of properties. These properties control the appearance and behavior of the widget. Examples include:

• backgroundColor
• textColor
• width, height, padding, margin
• elevation
• click_event (for actions, such as navigating to a route)

Child Widgets

Widgets can contain other widgets as children. For example, an ElevatedButton widget can have an Icon widget as its child.

"child": {
  "type": "Icon",
  "data": "list",
  "size": 25.0
}

Actions

Widgets such as buttons can trigger actions. The click_event property can define what happens when the widget is clicked, such as navigating to a different route:

"click_event": "route:/productDetail?goods_id=123"

🧑‍💻 Integration Notes

• The window.flutter_on_rails.callHandler method is used to send the JSON payload to Flutter.
• You can use the type property to specify the widget type.
• Use other properties such as color, padding, child, click_event, and more to customize the widget's behavior and appearance.
• Nested widgets can be created by defining child widgets within a parent widget.

💡 Future Features

More widget types and actions will be supported in the future. This framework is designed to be flexible and extensible, allowing you to build rich UIs dynamically.

📄 Example Structure Breakdown

Here’s a quick breakdown of the example structure:

• AppBar: Contains the title and actions.
  • Text: The title displayed in the AppBar.
  • Container: Used to wrap the ElevatedButton.
  • ElevatedButton: A clickable button with a child Icon.
    • Icon: A list icon inside the button.

💬 Conclusion

With the Flutter on Rails widget parser, you can easily create Flutter UIs directly using JSON. This dynamic approach simplifies UI building and allows for rapid development with minimal code.