Responsive X Toolkit

The Ultimate Responsive Toolkit for Flutter

A modern, lightweight, and production-ready solution for responsive UI in Flutter.
Built to help you scale fonts, spacing, icons, radius, and layout across all devices effortlessly.

🌟 Overview

ResponsiveX provides a unified responsive engine that works flawlessly on:

  • 📱 Mobile
  • 📲 Small Tablets
  • 💻 Tablets
  • 🖥 Desktop
  • 🖥️ Large Desktop / Ultra-Wide
  • 🌐 Web (Fully supported)

With a single API, you can scale:

  • Font sizes
  • Margins & spacing
  • Widths & heights
  • Icons
  • Border radius
  • Complete layout switching

✨ Features

  • ✔ Responsive font: 16.f(context)
  • ✔ Responsive spacing: 20.s(context)
  • ✔ Responsive icon: 24.ic(context)
  • ✔ Responsive width/height: 150.w(context)
  • ✔ Responsive border radius: 18.r(context)
  • ✔ Smart scaling engine based on width + pixel density
  • ✔ Clean extensions with zero boilerplate
  • ✔ Full multi-layout support (Mobile / Tablet / Desktop / Large Desktop)
  • ✔ No dependencies — Lightweight & fast

🚀 Quick Start

1. Add Dependency

Add to your pubspec.yaml:

dependencies:
  responsive_x_toolkit: ^1.0.3

2. Import Package

import 'package:responsive_x_toolkit/responsive_x.dart';

💡 Usage Examples

🔠 Responsive Font Size

Text(
  "Hello ResponsiveX",
  style: TextStyle(
    fontSize: 16.f(context), // Responsive font size
    fontWeight: FontWeight.bold,
  ),
);

📏 Responsive Spacing & Padding

Column(
  children: [
    SizedBox(height: 20.s(context)), // Responsive spacing
    
    Padding(
      padding: EdgeInsets.all(16.s(context)), // Responsive padding
      child: Container(
        width: 150.w(context), // Responsive width
        height: 200.h(context), // Responsive height
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12.r(context)), // Responsive radius
          color: Colors.blue,
        ),
      ),
    ),
  ],
);

🎯 Responsive Icons

Row(
  children: [
    Icon(Icons.home, size: 24.ic(context)), // Responsive icon
    Icon(Icons.settings, size: 24.ic(context)),
    Icon(Icons.person, size: 24.ic(context)),
  ],
);

🖥 Responsive Layout Builder

ResponsiveLayout(
  mobile: Scaffold(
    appBar: AppBar(title: Text('Mobile View')),
    body: MobileHomePage(),
  ),
  tablet: Scaffold(
    appBar: AppBar(title: Text('Tablet View')),
    body: TabletHomePage(),
  ),
  desktop: Scaffold(
    appBar: AppBar(title: Text('Desktop View')),
    body: DesktopHomePage(),
  ),
  largeDesktop: Scaffold(
    appBar: AppBar(title: Text('Large Desktop View')),
    body: LargeDesktopHomePage(),
  ),
);

📱 Conditional Layout

if (context.isMobile)
  MobileWidget()
else if (context.isTablet)
  TabletWidget()
else
  DesktopWidget()

🎛 Advanced Usage

Custom Breakpoints

ResponsiveWrapper(
  breakpoints: ResponsiveBreakpoints(
    mobile: 480,
    tablet: 768,
    desktop: 1024,
    largeDesktop: 1440,
  ),
  child: YourApp(),
);

Responsive Orientation

@override
Widget build(BuildContext context) {
  return OrientationBuilder(
    builder: (context, orientation) {
      return orientation == Orientation.portrait
          ? PortraitLayout()
          : LandscapeLayout();
    },
  );
}

Combined Responsive Values

Container(
  margin: EdgeInsets.symmetric(
    horizontal: 20.s(context),
    vertical: 10.s(context),
  ),
  padding: EdgeInsets.all(16.s(context)),
  width: context.isMobile ? 300.w(context) : 500.w(context),
  height: 150.h(context),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20.r(context)),
    color: Colors.blue.shade100,
  ),
  child: Text(
    'Responsive Container',
    style: TextStyle(fontSize: 18.f(context)),
  ),
);

📊 Breakpoint Reference

Device Breakpoint Typical Use
📱 Mobile ≤ 480px Phones
📲 Small Tablet 481px - 768px Small tablets
💻 Tablet 769px - 1024px Tablets, iPad
🖥 Desktop 1025px - 1440px Laptops, small screens
🖥️ Large Desktop ≥ 1441px Large monitors, TV

🤝 Contributing

We welcome contributions! Please feel free to submit issues, feature requests, or pull requests.

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

📄 License

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

🆘 Support

If you encounter any problems or have questions:

🌟 Show Your Support

If you find this package helpful, please consider:

  • ⭐ Starring the repository
  • 🐛 Reporting bugs
  • 💡 Suggesting new features
  • 📢 Sharing with other developers

Built with ❤️ for the Flutter community

  • Developed by Ibrahim Omran

ResponsiveXToolKit - Make every pixel count

Libraries

responsive_x