responsive_spacing_v2 1.3.0

A simple Flutter package to add responsive padding and margin widgets for consistent, adaptive spacing across different screen sizes.

example/lib/main.dart

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

void main() {
  runApp(
    const ResponsiveSpacingProvider(
      base: 8.0,
      scale: 1.5,
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Spacing Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SpacingDemoScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Generic responsive property example
    final gridCrossAxisCount = ResponsiveValue<int>(
      context,
      compact: 1,
      medium: 2,
      expanded: 3,
      large: 4,
    ).value;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Spacing v2'),
        actions: [
          Center(
            child: Padding(
              padding: const EdgeInsets.only(right: 16.0),
              child: Text(
                'Screen: ${context.screenType.name.toUpperCase()}',
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Responsive Padding
            ResponsivePadding(
              smallScreenPadding: 8.0,
              largeScreenPadding: 24.0,
              child: Card(
                color: Colors.blue.shade50,
                child: Padding(
                  padding: EdgeInsets.all(context.spaceMd),
                  child: const Text('ResponsivePadding (changes at 600px breakpoint)'),
                ),
              ),
            ),

            // Symmetric Responsive Padding
            ResponsivePadding.symmetric(
              horizontalSmall: 12.0,
              horizontalLarge: 32.0,
              verticalSmall: 6.0,
              verticalLarge: 16.0,
              child: Card(
                color: Colors.purple.shade50,
                child: Padding(
                  padding: EdgeInsets.all(context.spaceSm),
                  child: const Text('ResponsivePadding.symmetric'),
                ),
              ),
            ),

            // Responsive Margin
            ResponsiveMargin(
              smallScreenMargin: 8.0,
              largeScreenMargin: 20.0,
              child: ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.touch_app),
                label: const Text('Button with Responsive Margin'),
              ),
            ),

            // Type-Safe Spacers
            const ResponsiveSpacer.vertical(SpacingSize.md),
            const ResponsiveSpacer.horizontal(SpacingSize.lg),
            const ResponsiveSpacer.lg(),

            // num extension spacers
            16.verticalSpace,

            // Accessing spacing scale directly from context
            Padding(
              padding: EdgeInsets.symmetric(
                vertical: context.spacing.sm,
                horizontal: context.spacing.lg,
              ),
              child: Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.amber.shade100,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  'Grid columns for current screen: $gridCrossAxisCount\n'
                  'Spacing xs: ${context.spaceXs}, sm: ${context.spaceSm}, md: ${context.spaceMd}, lg: ${context.spaceLg}, xl: ${context.spaceXl}',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}