responsive_screen_master 2.0.2

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsive_screen_master/responsive_screen_master.dart';
import 'responsive_master_showcase.dart';
import 'responsive_screens.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ResponsiveMaster(
      // ⚙️ Optional: Configure global settings here
      config: const ResponsiveMasterConfig(
        mobileBreakpoint: 600,
        tabletBreakpoint: 1100,
        desktopBreakpoint: 1920,
        enableCaching: true,
      ),
      materialApp: true,
      builder: (context, deviceInfo) {
        return MaterialApp(
          title: 'Responsive Master Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
            useMaterial3: true,
          ),
          home: const SimpleExampleHome(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
            Text('Simple Responsive Demo', style: TextStyle(fontSize: 18.sp)),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 📱 Example 1: Responsive Text
            Text(
              'This text scales with screen size!',
              style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 2.h),

            // 📦 Example 2: Responsive Container
            Container(
              width: 80.w, // 80% of screen width
              height: 20.h, // 20% of screen height
              decoration: BoxDecoration(
                color: Colors.blueAccent.withValues(alpha: 0.2),
                borderRadius: BorderRadius.circular(15),
                border: Border.all(color: Colors.blue, width: 2),
              ),
              alignment: Alignment.center,
              child: Text(
                'Container: 80.w x 20.h',
                style: TextStyle(fontSize: 14.sp),
              ),
            ),

            SizedBox(height: 5.h),

            // 🧭 Navigation Buttons
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (_) => const ExampleResponsiveScreens()),
              ),
              child: Text('Go to Responsive Screens (Widget)',
                  style: TextStyle(fontSize: 14.sp)),
            ),
            SizedBox(height: 2.h),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (_) => const ResponsiveMasterShowcase()),
              ),
              child: Text('Go to Full Showcase',
                  style: TextStyle(fontSize: 14.sp)),
            ),
          ],
        ),
      ),
    );
  }
}