responsive_standard_tool 0.1.3

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

example/lib/main.dart

import 'package:flutter/material.dart'
    show
        AppBar,
        BuildContext,
        Center,
        MaterialApp,
        Scaffold,
        StatelessWidget,
        Text,
        TextStyle,
        Widget,
        runApp;
import 'package:responsive_standard_tool/responsive_standard_tool.dart'
    show
        LayoutOverlay,
        ResponsiveBuilder,
        ResponsiveConfig,
        ResponsiveConfigMap,
        ResponsiveConfigProvider;

void main() {
  runApp(
    ResponsiveConfigProvider(
      // Design reference sizes from Figma/Adobe XD
      designSizes: ResponsiveConfigMap(
        mobile: const ResponsiveConfig(width: 375, height: 812),
        tablet: const ResponsiveConfig(width: 768, height: 1024),
        desktop: const ResponsiveConfig(width: 1440, height: 1024),
        ultra: const ResponsiveConfig(width: 1920, height: 1080),
      ),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveBuilder(
        debugLog: true,
        builder: (context, deviceInfo, scaler) {
          return LayoutOverlay(
            enabled: true, // Shows responsive info during development
            child: Scaffold(
              appBar: AppBar(title: const Text('Responsive Tool Example')),
              body: Center(
                child: Text(
                  'Device: ${deviceInfo.type} | '
                  'Orientation: ${deviceInfo.isPortrait ? "Portrait" : "Landscape"}',
                  style: TextStyle(fontSize: scaler.scaleText(18)),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}