responsive_layout_kit 0.1.1

A comprehensive Flutter package for building responsive layouts across different screen sizes and orientations.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsive_layout_kit/responsive_layout_kit.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return AppScreenInit(
      designSize: const Size(375, 812), // iPhone X design size
      builder: (context, child) {
        return MaterialApp(
          title: 'Responsive Layout Kit Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            useMaterial3: true,
          ),
          home: const HomePage(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Layout Kit'),
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Device Info Section
            _buildDeviceInfoCard(context),

            SizedBox(height: ResponsiveSpacing.hM),

            // Responsive Sizing Examples
            _buildResponsiveSizingCard(context),

            SizedBox(height: ResponsiveSpacing.hM),

            // Responsive Spacing Examples
            _buildSpacingExamplesCard(context),

            SizedBox(height: ResponsiveSpacing.hM),

            // Responsive Builder Example
            _buildResponsiveBuilderCard(context),

            SizedBox(height: ResponsiveSpacing.hM),

            // Orientation Layout Example
            _buildOrientationCard(context),

            SizedBox(height: ResponsiveSpacing.hM),
          ],
        ).withResponsivePadding(context),
      ),
    );
  }

  Widget _buildDeviceInfoCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: ResponsiveSpacing.m.allPadding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Device Information',
              style: TextStyle(
                fontSize: 20.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            _buildInfoRow('Device Type', context.deviceType.name),
            _buildInfoRow(
                'Screen Width', context.screenWidth.toStringAsFixed(1)),
            _buildInfoRow(
                'Screen Height', context.screenHeight.toStringAsFixed(1)),
            _buildInfoRow(
                'Orientation', context.isLandscape ? 'Landscape' : 'Portrait'),
            _buildInfoRow('Is Phone', context.isPhone.toString()),
            _buildInfoRow('Is Tablet', context.isTablet.toString()),
            _buildInfoRow('Is Desktop', context.isDesktop.toString()),
          ],
        ),
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return Padding(
      padding: ResponsiveSpacing.s.verticalPadding,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label, style: const TextStyle(fontWeight: FontWeight.w500)),
          Text(value, style: const TextStyle(color: Colors.grey)),
        ],
      ),
    );
  }

  Widget _buildResponsiveSizingCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: ResponsiveSpacing.m.allPadding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Responsive Sizing (.w, .h, .sp)',
              style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            Container(
              width: 200.w,
              height: 100.h,
              decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.2),
                borderRadius: BorderRadius.circular(8.r),
                border: Border.all(color: Colors.blue, width: 2),
              ),
              child: Center(
                child: Text(
                  '200.w × 100.h',
                  style: TextStyle(fontSize: 16.sp),
                ),
              ),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            Text(
              'Font sizes: 12.sp, 16.sp, 20.sp, 24.sp',
              style: TextStyle(fontSize: 12.sp),
            ),
            Text(
              'Font sizes: 12.sp, 16.sp, 20.sp, 24.sp',
              style: TextStyle(fontSize: 16.sp),
            ),
            Text(
              'Font sizes: 12.sp, 16.sp, 20.sp, 24.sp',
              style: TextStyle(fontSize: 20.sp),
            ),
            Text(
              'Font sizes: 12.sp, 16.sp, 20.sp, 24.sp',
              style: TextStyle(fontSize: 24.sp),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSpacingExamplesCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: ResponsiveSpacing.m.allPadding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Responsive Spacing System',
              style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            Text(
              'Using ResponsiveSpacing constants:',
              style: TextStyle(fontSize: 14.sp, color: Colors.grey[600]),
            ),
            SizedBox(height: ResponsiveSpacing.hXS),
            Wrap(
              spacing: ResponsiveSpacing.wS,
              runSpacing: ResponsiveSpacing.hS,
              children: [
                _buildSpacingChip('XS', ResponsiveSpacing.xs),
                _buildSpacingChip('S', ResponsiveSpacing.s),
                _buildSpacingChip('M', ResponsiveSpacing.m),
                _buildSpacingChip('L', ResponsiveSpacing.l),
                _buildSpacingChip('XL', ResponsiveSpacing.xl),
                _buildSpacingChip('XXL', ResponsiveSpacing.xxl),
              ],
            ),
            SizedBox(height: ResponsiveSpacing.hM),
            Text(
              'Using extensions (.allPadding, .hGap, .vGap):',
              style: TextStyle(fontSize: 14.sp, color: Colors.grey[600]),
            ),
            SizedBox(height: ResponsiveSpacing.hXS),
            Container(
              padding: ResponsiveSpacing.m.allPadding,
              decoration: BoxDecoration(
                color: Colors.green.withOpacity(0.1),
                borderRadius: ResponsiveSpacing.m.radius,
              ),
              child: const Text('Container with .allPadding'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSpacingChip(String label, double value) {
    return Chip(
      label: Text('$label (${value.toStringAsFixed(0)})'),
      backgroundColor: Colors.blue.withOpacity(0.1),
    );
  }

  Widget _buildResponsiveBuilderCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: ResponsiveSpacing.m.allPadding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'ResponsiveBuilder Example',
              style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            ResponsiveBuilder(
              mobileBuilder: (context) =>
                  _buildLayoutExample('Mobile Layout', Colors.blue),
              tabletBuilder: (context) =>
                  _buildLayoutExample('Tablet Layout', Colors.orange),
              desktopBuilder: (context) =>
                  _buildLayoutExample('Desktop Layout', Colors.green),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLayoutExample(String title, Color color) {
    return Container(
      padding: ResponsiveSpacing.m.allPadding,
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(ResponsiveSpacing.m),
        border: Border.all(color: color, width: 2),
      ),
      child: Column(
        children: [
          Icon(Icons.devices, size: 48.sp, color: color),
          SizedBox(height: ResponsiveSpacing.hS),
          Text(
            title,
            style: TextStyle(
              fontSize: 18.sp,
              fontWeight: FontWeight.bold,
              color: color,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildOrientationCard(BuildContext context) {
    return Card(
      child: Padding(
        padding: ResponsiveSpacing.m.allPadding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'OrientationLayout Example',
              style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: ResponsiveSpacing.hS),
            OrientationLayout(
              portrait: (context) => Container(
                padding: ResponsiveSpacing.m.allPadding,
                decoration: BoxDecoration(
                  color: Colors.purple.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(ResponsiveSpacing.m),
                ),
                child: Column(
                  children: [
                    const Icon(Icons.phone_android, size: 48),
                    SizedBox(height: ResponsiveSpacing.hS),
                    const Text('Portrait Mode',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
              landscape: (context) => Container(
                padding: ResponsiveSpacing.m.allPadding,
                decoration: BoxDecoration(
                  color: Colors.teal.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(ResponsiveSpacing.m),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(Icons.phone_android, size: 48),
                    SizedBox(width: ResponsiveSpacing.wM),
                    const Text('Landscape Mode',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}