Flutter on Rails #

A powerful integration between Flutter and Ruby on Rails that enables seamless communication between web and mobile applications.

Features #

• 🔄 Bi-directional Communication: Seamless communication between Flutter and Rails
• 📱 Cross-Platform: Works on iOS, Android, and desktop
• 🎨 Customizable UI: Platform-specific dialogs,navigation and animations
• 🔌 Easy Integration: Simple setup and configuration
• 🚀 Performance Optimized: Efficient WebView handling and state management

Installation #

Add the package to your pubspec.yaml:

dependencies:
  flutter_on_rails: ^0.0.3.alpha

Quick Start #

1. Initialize the WebView in your Flutter app:

import 'package:flutter/material.dart';
import 'package:flutter_on_rails/flutter_on_rails.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await init();
  runApp(MaterialApp(home: MainScreen()));
}

2. Add navigation attributes to your Rails views:

<a
  href="/messages/new"
  data_frails_navigation='{"action":"push", "navigable":true, "animate":"circularReveal","backgroundColor": "#111827","leadingColor": "#111827","title": "Message" }'
  >New Message</a
>

Dialog Animations #

DialogAnimation.openDialog(
  context,
  {
    'title': 'Custom Dialog',
    'content': 'This is a test message',
    'animate': 'scale', // Available options: none, rotate, scale, right, left, downToUp, topToDown
    'actions': [
      {
        'text': 'OK',
        'onPressed': () => print('OK pressed')
      }
    ]
  },
);

API Reference #

Navigation #

• data-frails-navigation: Attribute for handling navigation in Rails views
• data-frails-action: Attribute for custom actions

Dialog Options #

{
  'title': String,           // Dialog title
  'content': String,         // Dialog content
  'animate': String,         // Animation type
  'actions': List<Map>,      // Dialog actions
  'backgroundColor': Color,  // Dialog background color
  'elevation': double,       // Dialog elevation
  'shape': ShapeBorder,      // Dialog shape
  'borderRadius': double,    // Dialog border radius
  'titlePadding': EdgeInsets,// Title padding
  'contentPadding': EdgeInsets,// Content padding
  'actionsPadding': EdgeInsets,// Actions padding
  'buttonPadding': EdgeInsets,// Button padding
  'insetPadding': EdgeInsets,// Dialog inset padding
}

Platform-Specific Features #

iOS #

• Custom keyboard handling
• Native dialog support
• Gesture navigation
• Pull-to-refresh functionality

Android #

• Custom WebView settings
• Native dialog support
• Pull-to-refresh functionality

Contributing #

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

For support, email adammusaaly@gmail.com or join our Slack channel.

Acknowledgments #

• Flutter team for the amazing framework
• Ruby on Rails community
• All contributors who have helped shape this project

Made with ❤️ by [Adam Moussa Ali]