adaptive_responsive_ui 1.0.5

A comprehensive Flutter package for responsive UI design with easy-to-use extensions for width, height, padding, margin, fonts, and device detection.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_responsive_helper/responsive_extensions.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    // Initialize ResponsiveConfig ONCE with your design dimensions
    return LayoutBuilder(
      builder: (context, constraints) {
        ResponsiveConfig.init(context, baseWidth: 390, baseHeight: 844);

        return const MaterialApp(
          title: 'Adaptive Responsive UI Demo',
          home: HomeScreen(),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Responsive Demo',
          style: TextStyle(fontSize: 18.sp()),
        ),
      ),
      body: SingleChildScrollView(
        padding: 16.p,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Device Info: ${context.deviceType}',
              style: TextStyle(fontSize: 16.sp()),
            ),
            16.gapH,

            // Responsive Container
            Container(
              width: 300.w(),
              height: 150.h(),
              padding: 20.p,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(12.r()),
              ),
              child: Center(
                child: Text(
                  'Responsive Container',
                  style: TextStyle(
                    fontSize: 16.sp(),
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            20.gapH,

            // Symmetric Padding Example
            Container(
              padding: pSym(h: 12.0, w: 15.0),
              color: Colors.green.shade100,
              child: Text(
                'Symmetric Padding Example',
                style: TextStyle(fontSize: 14.sp()),
              ),
            ),
            20.gapH,

            // Gaps Example
            Column(
              children: [
                Text('Item 1', style: TextStyle(fontSize: 14.sp())),
                16.gapH,
                Text('Item 2', style: TextStyle(fontSize: 14.sp())),
              ],
            ),
            20.gapH,

            // Device screen dimensions
            Text('Screen Width: ${context.screenWidth.toInt()} px'),
            Text('Screen Height: ${context.screenHeight.toInt()} px'),
            Text('Is Mobile: ${context.isMobile}'),
            Text('Is Tablet: ${context.isTablet}'),
            Text('Is Desktop: ${context.isDesktop}'),
          ],
        ),
      ),
    );
  }
}