Responsive Helper 📱🖥️ by Mushthak VP #

A cutting-edge Flutter package for building truly responsive UIs that adapt seamlessly across different screen sizes, orientations, and device types. Developed by Mushthak VP to simplify responsive design in Flutter applications.

🏆 SEO Keywords #

Responsive Flutter Package, Flutter UI Adaptation, Cross-Device UI Design, Responsive Design Tool, Flutter Responsive Framework

✨ Features #

• 🔍 Device Type Detection

  • Identify device type (Mobile, Tablet, Desktop)
  • Orientation detection (Portrait & Landscape)

• 📐 Adaptive Sizing

  • Percentage-based width and height calculations
  • Safe area aware sizing
  • Adaptive font sizes
  • Device-specific value selection

• 🛠️ Convenient Extensions

  • Easy-to-use context extensions
  • Predefined spacing widgets
  • Lightweight and intuitive API

📦 Installation #

1. Add the package to your pubspec.yaml:

dependencies:
  responsive_helper: ^1.0.0

2. Install dependencies:

flutter pub get

🚀 Usage Guide #

1. Import the Package #

import 'package:responsive_helper/responsive.dart';

1.1 Main Function #

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

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

  @override
  Widget responsive(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

2. Context Extensions #

The package provides powerful extensions on BuildContext:

// Screen Dimensions
double screenWidth = context.width;
double screenHeight = context.height;

// Adaptive Font Sizing
TextStyle title = TextStyle(fontSize: context.fs(20));

// Percentage-based Sizing
Widget responsiveContainer = Container(
  width: context.wp(80),   // 80% of screen width
  height: context.hp(50),  // 50% of screen height
);

// Device-specific Values
Widget adaptiveWidget = context.deviceValue(
  mobile: mobileWidget,
  tablet: tabletWidget,
  desktop: desktopWidget,
);

3. Detailed Examples #

Device Information

class DeviceInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Screen Width: ${context.width}'),
        Text('Screen Height: ${context.height}'),
        Text('Orientation: ${ResponsiveHelper.isPortrait ? 'Portrait' : 'Landscape'}'),
        Text('Device Type: ${ResponsiveHelper.deviceType}'),
      ],
    );
  }
}

Adaptive Sizing

class AdaptiveSizingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Percentage-based container
        Container(
          width: context.wp(90),   // 90% of screen width
          height: context.hp(20),  // 20% of screen height
          color: Colors.blue,
        ),

        // Adaptive padding
        Padding(
          padding: EdgeInsets.all(context.deviceValue(
            mobile: context.p8,
            tablet: context.p16,
            desktop: context.p24,
          )),
          child: Text('Adaptive Padding'),
        ),
      ],
    );
  }
}

Font Sizing

class ResponsiveFontExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Adaptive font sizes
        Text('Title', style: TextStyle(fontSize: context.fs(24))),
        Text('Subtitle', style: TextStyle(fontSize: context.fs(18))),
        
        // Predefined font sizes
        Text('Small Text', style: TextStyle(fontSize: context.fs12)),
        Text('Large Text', style: TextStyle(fontSize: context.fs32)),
      ],
    );
  }
}

4. Available Extensions #

🎯 Best Practices #

• Use context.wp() and context.hp() for responsive layouts
• Utilize context.fs() for adaptive typography
• Leverage context.deviceValue() for device-specific customizations
• Always consider both portrait and landscape orientations

🐞 Troubleshooting #

• Ensure the package is correctly imported
• Check that you're using the latest version
• Verify flutter and dart SDK compatibility
• Check for any conflicts with other packages

📞 Contact & Support #

Author: Mushthak VP

🌐 Connect With Me #

• Email: mail.musthak@gmail.com
• WhatsApp: +919061213930
• LinkedIn: Mushthak VP
• Instagram: @musth4k
• GitHub: mushthakvp

💡 Collaboration #

Have a project or need custom Flutter development? Feel free to reach out! I'm always open to interesting projects, collaborations, and opportunities.

🤝 Contributing #

Contributions are welcome! Whether you're reporting bugs, suggesting improvements, or want to collaborate, don't hesitate to connect.

📄 License #

MIT License

🆘 Support #

For any questions, issues, or custom development needs, please contact me directly via email or social media channels.