respozen 0.1.0

A powerful Flutter package to create responsive apps across all platforms with safe scaling and pixel-perfect rendering.

example/main.dart

import 'package:flutter/material.dart';
import 'package:respozen/src/responsive_helper.dart';
import 'package:respozen/respozen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Respozen Responsive Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'SF Pro Display',
      ),
      home: const ResponsiveHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Initialize responsive config (usually done in main.dart)
    ResponsiveConfig.instance.initialize(
      designWidth: 375.0, // iPhone design width
      designHeight: 812.0, // iPhone design height
    );

    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: SafeArea(
        child: SingleChildScrollView(
          child: RColumn(
            gap: 24,
            children: [
              // Header Section
              _buildHeader(context),

              // Device Info Card
              _buildDeviceInfoCard(context),

              // Responsive Grid Demo
              _buildResponsiveGrid(context),

              // Multi-Device Layout Demo
              _buildMultiDeviceDemo(context),

              // Typography Demo
              _buildTypographyDemo(context),

              // Container Demos
              _buildContainerDemos(context),

              // Auto-fit Demo
              _buildAutoFitDemo(context),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return RContainer(
      width: double.infinity,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue[600]!, Colors.purple[600]!],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16.rf),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: RColumn(
        gap: 8,
        children: [
          RText(
            'Respozen Demo',
            fontSize: ResponsiveHelper.responsiveValue<double>(
              mobile: 28,
              tablet: 32,
              desktop: 36,
            ),
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          RText(
            'Advanced Responsive Flutter Package',
            fontSize: 16,
            color: Colors.white.withOpacity(0.9),
          ),
        ],
      ),
    );
  }

  Widget _buildDeviceInfoCard(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, device) {
        return RContainer(
          width: double.infinity,
          padding: const EdgeInsets.all(20),
          margin: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.rf),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: RColumn(
            gap: 12,
            children: [
              RText(
                'Device Information',
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.grey[800],
              ),
              _buildInfoRow(
                'Device Type',
                device.type.toString().split('.').last,
              ),
              _buildInfoRow(
                'Operating System',
                device.os.toString().split('.').last,
              ),
              _buildInfoRow(
                'Orientation',
                device.orientation.toString().split('.').last,
              ),
              _buildInfoRow(
                'Screen Size',
                '${device.width.toInt()} x ${device.height.toInt()}',
              ),
              _buildInfoRow(
                'Pixel Ratio',
                device.pixelRatio.toStringAsFixed(2),
              ),
              _buildInfoRow(
                'Safe Width',
                ResponsiveHelper.safeAreaWidth.toInt().toString(),
              ),
              _buildInfoRow(
                'Safe Height',
                ResponsiveHelper.safeAreaHeight.toInt().toString(),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return RRow(
      children: [
        Expanded(child: RText(label, fontSize: 14, color: Colors.grey[600])),
        RText(
          value,
          fontSize: 14,
          fontWeight: FontWeight.w600,
          color: Colors.grey[800],
        ),
      ],
    );
  }

  Widget _buildResponsiveGrid(BuildContext context) {
    final crossAxisCount = ResponsiveHelper.responsiveValue<int>(
      mobile: 2,
      tablet: 3,
      desktop: 4,
    );

    final colors = [
      Colors.red[400]!,
      Colors.green[400]!,
      Colors.blue[400]!,
      Colors.orange[400]!,
      Colors.purple[400]!,
      Colors.teal[400]!,
      Colors.pink[400]!,
      Colors.indigo[400]!,
    ];

    return RContainer(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: RColumn(
        gap: 16,
        children: [
          const RText(
            'Responsive Grid System',
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          RGrid(
            crossAxisCount: crossAxisCount,
            gap: 12,
            children: List.generate(8, (index) {
              return RContainer(
                height: 120,
                decoration: BoxDecoration(
                  color: colors[index],
                  borderRadius: BorderRadius.circular(12.rf),
                ),
                child: Center(
                  child: RText(
                    'Item ${index + 1}',
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
              );
            }),
          ),
        ],
      ),
    );
  }

  Widget _buildMultiDeviceDemo(BuildContext context) {
    return RContainer(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: RColumn(
        gap: 16,
        children: [
          const RText(
            'Multi-Device Layout',
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          MultiResponsiveBuilder(
            mobile: _buildMobileLayout(),
            tablet: _buildTabletLayout(),
            desktop: _buildDesktopLayout(),
          ),
        ],
      ),
    );
  }

  Widget _buildMobileLayout() {
    return RContainer(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[50],
        borderRadius: BorderRadius.circular(12.rf),
        border: Border.all(color: Colors.red[200]!, width: 2),
      ),
      child: RColumn(
        gap: 8,
        children: [
          Icon(Icons.phone_android, size: 32.rw, color: Colors.red[600]),
          RText(
            'Mobile Layout',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.red[700],
          ),
          RText(
            'Optimized for touch interaction and single-column layouts.',
            fontSize: 14,
            color: Colors.red[600],
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildTabletLayout() {
    return RContainer(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.blue[50],
        borderRadius: BorderRadius.circular(12.rf),
        border: Border.all(color: Colors.blue[200]!, width: 2),
      ),
      child: RRow(
        gap: 16,
        children: [
          Icon(Icons.tablet_mac, size: 32.rw, color: Colors.blue[600]),
          Expanded(
            child: RColumn(
              gap: 4,
              children: [
                RText(
                  'Tablet Layout',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue[700],
                ),
                RText(
                  'Balanced design with more screen real estate.',
                  fontSize: 14,
                  color: Colors.blue[600],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDesktopLayout() {
    return RContainer(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.green[50],
        borderRadius: BorderRadius.circular(12.rf),
        border: Border.all(color: Colors.green[200]!, width: 2),
      ),
      child: RRow(
        gap: 20,
        children: [
          Icon(Icons.desktop_mac, size: 40.rw, color: Colors.green[600]),
          Expanded(
            child: RColumn(
              gap: 8,
              children: [
                RText(
                  'Desktop Layout',
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.green[700],
                ),
                RText(
                  'Full-featured interface with maximum information density and advanced interactions.',
                  fontSize: 16,
                  color: Colors.green[600],
                ),
              ],
            ),
          ),
          RContainer(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: Colors.green[200],
              borderRadius: BorderRadius.circular(8.rf),
            ),
            child: Icon(Icons.dashboard, color: Colors.green[700]),
          ),
        ],
      ),
    );
  }

  Widget _buildTypographyDemo(BuildContext context) {
    return RContainer(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.rf),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: RColumn(
        gap: 16,
        children: [
          const RText(
            'Responsive Typography',
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          RText(
            'Heading 1',
            fontSize: ResponsiveHelper.responsiveValue<double>(
              mobile: 32,
              tablet: 36,
              desktop: 40,
            ),
            fontWeight: FontWeight.bold,
            color: Colors.grey[800],
          ),
          RText(
            'Heading 2',
            fontSize: ResponsiveHelper.responsiveValue<double>(
              mobile: 24,
              tablet: 28,
              desktop: 32,
            ),
            fontWeight: FontWeight.w600,
            color: Colors.grey[700],
          ),
          RText(
            'Body Text - This text automatically adjusts its size based on the device type and screen size. The responsive font scaling ensures optimal readability across all devices.',
            fontSize: ResponsiveHelper.responsiveValue<double>(
              mobile: 16,
              tablet: 18,
              desktop: 20,
            ),
            color: Colors.grey[600],
          ),
          RText(
            'Small Text - Additional information with smaller font size.',
            fontSize: ResponsiveHelper.responsiveValue<double>(
              mobile: 12,
              tablet: 14,
              desktop: 16,
            ),
            color: Colors.grey[500],
          ),
        ],
      ),
    );
  }

  Widget _buildContainerDemos(BuildContext context) {
    return RContainer(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: RColumn(
        gap: 16,
        children: [
          const RText(
            'Container Scaling Demos',
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),

          // Normal scaling vs Safe scaling
          RRow(
            gap: 12,
            children: [
              Expanded(
                child: RContainer(
                  height: 100,
                  width: 200, // This might overflow on small screens
                  decoration: BoxDecoration(
                    color: Colors.orange[300],
                    borderRadius: BorderRadius.circular(8.rf),
                  ),
                  child: const Center(
                    child: RText(
                      'Normal\nScaling',
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      textAlign: TextAlign.center,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: RContainer(
                  height: 100,
                  width: 200,
                  preventOverflow: true, // This prevents overflow
                  decoration: BoxDecoration(
                    color: Colors.green[400],
                    borderRadius: BorderRadius.circular(8.rf),
                  ),
                  child: const Center(
                    child: RText(
                      'Safe\nScaling',
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      textAlign: TextAlign.center,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),

          // Aspect ratio demo
          RContainer(
            width: 300,
            aspectRatio: 16 / 9,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.purple[400]!, Colors.pink[400]!],
              ),
              borderRadius: BorderRadius.circular(12.rf),
            ),
            child: const Center(
              child: RText(
                'Aspect Ratio\n16:9',
                fontSize: 18,
                fontWeight: FontWeight.bold,
                textAlign: TextAlign.center,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAutoFitDemo(BuildContext context) {
    return RContainer(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: RColumn(
        gap: 16,
        children: [
          const RText(
            'Auto-Fit Demo',
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          RText(
            'These containers automatically adjust their size to prevent overflow while maintaining proportions.',
            fontSize: 14,
            color: Colors.grey[600],
            textAlign: TextAlign.center,
          ),

          // Auto-fit containers
          RContainer(
            width: 400, // Large width that might not fit
            height: 120,
            autoFit: true,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue[400],
              borderRadius: BorderRadius.circular(12.rf),
            ),
            child: const Center(
              child: RText(
                'Auto-Fit Container\nAdjusts to screen size',
                fontSize: 16,
                fontWeight: FontWeight.w600,
                textAlign: TextAlign.center,
                color: Colors.white,
              ),
            ),
          ),

          const RSizedBox(height: 40),

          // Footer
          RContainer(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.grey[100],
              borderRadius: BorderRadius.circular(8.rf),
            ),
            child: RText(
              'Respozen - Advanced Responsive Flutter Package\nMade with ❤️ for Flutter developers',
              fontSize: 12,
              textAlign: TextAlign.center,
              color: Colors.grey[600],
            ),
          ),
        ],
      ),
    );
  }
}

// Additional demo showing context extensions
class ContextExtensionDemo extends StatelessWidget {
  const ContextExtensionDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Context Extensions Demo')),
      body: Center(
        child: RColumn(
          gap: 16,
          children: [
            RText('Screen Width: ${context.screenWidth.toInt()}'),
            RText('Screen Height: ${context.screenHeight.toInt()}'),
            RText('Is Mobile: ${context.isMobile}'),
            RText('Is Tablet: ${context.isTablet}'),
            RText('Is Desktop: ${context.isDesktop}'),
            RText('Is Portrait: ${context.isPortrait}'),
            RText('Is Landscape: ${context.isLandscape}'),
          ],
        ),
      ),
    );
  }
}

// Advanced responsive form example
class ResponsiveFormExample extends StatelessWidget {
  const ResponsiveFormExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Form')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.rw),
        child: RContainer(
          width: ResponsiveHelper.responsiveValue<double>(
            mobile: double.infinity,
            tablet: 600,
            desktop: 800,
          ),
          child: RColumn(
            gap: 20,
            children: [
              // Form fields that adapt to screen size
              _buildTextField('Name', Icons.person),
              _buildTextField('Email', Icons.email),
              _buildTextField('Phone', Icons.phone),

              // Responsive button layout
              ResponsiveHelper.responsiveValue<Widget>(
                mobile: RColumn(
                  gap: 12,
                  children: [
                    _buildButton('Submit', Colors.blue, true),
                    _buildButton('Cancel', Colors.grey, false),
                  ],
                ),
                tablet: RRow(
                  gap: 16,
                  children: [
                    Expanded(child: _buildButton('Cancel', Colors.grey, false)),
                    Expanded(child: _buildButton('Submit', Colors.blue, true)),
                  ],
                ),
                desktop: RRow(
                  children: [
                    const Spacer(),
                    _buildButton('Cancel', Colors.grey, false),
                    const RSizedBox(width: 16),
                    _buildButton('Submit', Colors.blue, true),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTextField(String label, IconData icon) {
    return RContainer(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[300]!),
        borderRadius: BorderRadius.circular(8.rr),
      ),
      child: RRow(
        gap: 12,
        children: [
          Icon(icon, size: 20.rw, color: Colors.grey[600]),
          Expanded(
            child: TextFormField(
              decoration: InputDecoration(
                labelText: label,
                border: InputBorder.none,
                labelStyle: TextStyle(fontSize: 16.rf),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildButton(String text, Color color, bool isPrimary) {
    return RContainer(
      height: 48,
      width: ResponsiveHelper.responsiveValue<double?>(
        mobile: double.infinity,
        tablet: null,
        desktop: 120,
      ),
      decoration: BoxDecoration(
        color: isPrimary ? color : Colors.transparent,
        border: Border.all(color: color),
        borderRadius: BorderRadius.circular(8.rr),
      ),
      child: Center(
        child: RText(
          text,
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: isPrimary ? Colors.white : color,
        ),
      ),
    );
  }
}