responsive_standard_tool 0.1.1

A scalable and context-aware responsive design system for Flutter apps. Supports multiple device breakpoints, auto-scaling, and layout abstraction for production-ready UIs.

📐 responsive_standard_tool

A scalable, elegant, and production-ready responsive layout system for Flutter.
Designed for teams who work with multiple design breakpoints (mobile, tablet, desktop, ultra) and want clean, maintainable, context-driven scaling.

---

🎯 Why use this?

responsive_standard_tool bridges the gap between design tools like Figma and real production UIs in Flutter.
It uses your design canvas sizes to scale widgets, layout, and text dynamically and consistently across breakpoints.

---

✨ Features

• 🧱 ResponsiveBuilder: build responsive UIs with context-aware device info and scaling.
• 🔁 Breakpoint animation transitions (mobile, tablet, desktop, ultra).
• 🎯 Scaler: scale text, dimensions, and padding from design sizes.
• 📱 Device detection via screen width.
• 🧩 ResponsiveScope for context-wide access to scaler/device info.
• 🎨 LayoutOverlay for debugging layout in development.
• 💼 Production-grade folder structure with src/ isolation.
• 🛠️ Configurable design sizes (e.g. Figma specs) using ResponsiveConfigProvider.

---

🚀 Installation

Add to your project:

flutter pub add responsive_standard_tool

Or in pubspec.yaml:

dependencies:
  responsive_standard_tool: ^0.1.1

---

🧩 Getting Started

1. Wrap your app with ResponsiveConfigProvider

import 'package:responsive_standard_tool/responsive_standard_tool.dart';

void main() {
  runApp(
    ResponsiveConfigProvider(
      designSizes: ResponsiveConfigMap(
        mobile: ResponsiveConfig(width: 375, height: 812),
        tablet: ResponsiveConfig(width: 768, height: 1024),
        desktop: ResponsiveConfig(width: 1440, height: 1024),
        ultra: ResponsiveConfig(width: 1920, height: 1080),
      ),
      child: const MyApp(),
    ),
  );
}

---

📦 Usage Example

ResponsiveBuilder(
  debugLog: true,
  builder: (context, deviceInfo, scaler) {
    return Scaffold(
      body: Center(
        child: Text(
          'Device: ${deviceInfo.type}',
          style: TextStyle(fontSize: scaler.scaleText(18)),
        ),
      ),
    );
  },
);

Or access via context extensions:

context.scaler      // Access to Scaler
context.deviceInfo  // Access to current device type and orientation
context.spacing     // Predefined responsive spacing

---

🧠 Design Size vs Scaling

Design sizes represent the canvas dimensions used by your designer in tools like Figma, Adobe XD, or Sketch.
This package uses those as a baseline to scale layout responsively on all screen sizes.

---

📂 Folder Structure

lib/
├── responsive_standard_tool.dart   // Public API
└── src/
    ├── builder/
    ├── core/
    ├── config/
    ├── utils/
    ├── extensions/

---

🧪 Testing

You can write widget tests using MediaQuery and inject fake screen sizes for each breakpoint.

---

❤️ Contributing

Pull requests are welcome. Please follow the coding style used in the project and include tests for any changes.