Flutter on Rails — Bottom Tabs Documentation

Overview

Flutter on Rails allows you to define bottom tab navigation directly from your Rails views using standard HTML and embedded Ruby (.erb). The data-frails-bottom-tabs attribute enables Flutter to interpret the tab navigation structure and render it accordingly in the Flutter UI.

HTML Example (Rails Side)

Although the structure is rendered as HTML on the web, only the data-frails-bottom-tabs and the inner data attributes are relevant for the Flutter on Rails engine.

<div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4" data-frails-bottom-tabs="bottom-navigation">
  <div class="container mx-auto max-w-6xl flex justify-center gap-4">
    <%= link_to native_demo_path, class: "flex items-center px-4 py-2 rounded-lg text-blue-600 hover:bg-blue-50 transition duration-300", data: { icon: { icon: "home", label: "Home", color: "#2563eb", size: 24 } } do %>
      <span class="ml-2">Home</span>
    <% end %>

    <%= link_to animation_demo_path, class: "flex items-center px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition duration-300", data: { icon: { icon: "animation", label: "Animation", color: "#2563eb", size: 24 } } do %>
      <span class="ml-2">Animation</span>
    <% end %>

    <%= 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: { icon: { icon: "message", label: "Form", color: "#2563eb", size: 24 } } do %>
      <span class="ml-2">Form</span>
    <% end %>
  </div>
</div>

Configuration Reference

Each tab item must be a link_to element containing a data attribute with the following properties:

icon: The icon to display.
- icon (String): Name of the Material Design icon (e.g., home, animation, message).
- label (String): Text label for the tab.
- color (String): Hex color code for the icon (e.g., #2563eb).
- size (Integer): Size of the icon (e.g., 24).

Material Design Icons Support

Flutter on Rails supports all Material Design Icons.

To browse all available icons and their names, visit the official Google Material Icons directory.

Icon Usage

Flutter on Rails uses Material Design Icons, compatible with Flutter’s native Icons class.

✅ Important: Use underscores (_) instead of dashes (-) in icon names.

Examples

Icon Label	Material Icon String
Home	`home`
Arrow Forward	`arrow_forward_ios`
Search	`search`
Notifications	`notifications_none`
Message	`message`
Animation	`animation`

You can browse all supported icons here: Flutter Material Icons

Example:

<%= link_to profile_path, data: { icon: { icon: "account_circle", label: "Profile", color: "#000000", size: 24 } } do %>
  <span class="ml-2">Profile</span>
<% end %>

Summary

Define bottom tabs using data-frails-bottom-tabs in your Rails views.
Configure each tab with icon metadata using the data attribute.
Icons and labels are parsed on the Flutter side using a dynamic widget parser.
Fully compatible with Material Design Icons.

Flutter on Rails – Bottom Navigation Tabs