adaptive_responsive_ui 1.0.1

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) {
    return const MaterialApp(
      title: 'Responsive Utils Demo',
      home: HomeScreen(),
    );
  }
}

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

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

    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Utils Example')),
      body: Padding(
        padding: 16.p(context),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Device Info
            Text(
              'Device: ${context.deviceType}',
              style: TextStyle(fontSize: 18.sp(context)),
            ),
            16.gapH(context),

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

            // Responsive Padding Example
            Container(
              padding: 16.pSymmetric(
                context: context,
                horizontal: 20,
                vertical: 10,
              ),
              color: Colors.green.shade100,
              child: Text(
                'Symmetric Padding',
                style: TextStyle(fontSize: 14.sp(context)),
              ),
            ),
            20.gapH(context),

            // Device Type Display
            Text(
              'Screen Width: ${context.screenWidth.toStringAsFixed(0)}',
              style: TextStyle(fontSize: 14.sp(context)),
            ),
            Text(
              'Screen Height: ${context.screenHeight.toStringAsFixed(0)}',
              style: TextStyle(fontSize: 14.sp(context)),
            ),
            Text(
              'Is Mobile: ${context.isMobile}',
              style: TextStyle(fontSize: 14.sp(context)),
            ),
            Text(
              'Is Tablet: ${context.isTablet}',
              style: TextStyle(fontSize: 14.sp(context)),
            ),
            Text(
              'Is Desktop: ${context.isDesktop}',
              style: TextStyle(fontSize: 14.sp(context)),
            ),
          ],
        ),
      ),
    );
  }
}