Adaptive Design #

A Flutter package that simplifies the creation of responsive and adaptive user interfaces. Adaptive Design combines the strengths of existing responsive packages while addressing their limitations, providing an easy-to-use API for developers.

Features #

Responsive Sizing: Scale widgets and fonts according to screen size.
Breakpoint Management: Handle different layouts for mobile, tablet, and desktop.
Device and Orientation Detection: Access device type and orientation information.
Adaptive Widgets: Build widgets that adapt to different screen sizes.
Responsive Text: Automatically scale text for different devices.
Customizable: Set custom base sizes and breakpoints.

Installation #

Add the following to your pubspec.yaml:

dependencies:
  adaptive_design: ^1.0.0

    dependencies:
      adaptive_design:
        git:
          url: https://github.com/loqmanali/adaptive_design.git
          ref: main

Then, run:

flutter pub get

Getting Started #

1. Initialization #

Wrap your app with AdaptiveDesignProvider in your main.dart:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdaptiveDesignProvider(
      context: context,
      child: MaterialApp(
        title: 'Adaptive Design Demo',
        home: HomePage(),
      ),
    );
  }
}

2. Accessing Responsive Utilities #

Use AdaptiveDesignProvider.of(context) to access responsive utilities:

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final adaptiveDesign = AdaptiveDesignProvider.of(context);
    final size = adaptiveDesign.size;

    return Scaffold(
      appBar: AppBar(
        title: ResponsiveText('Adaptive Design Demo'),
      ),
      body: Center(
        child: Container(
          width: size.scaleWidth(250),
          height: size.scaleHeight(150),
          color: Colors.blue,
          child: Center(
            child: ResponsiveText(
              'This is a responsive container',
              style: TextStyle(color: Colors.white),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

3. Using Adaptive Widgets #

AdaptiveContainer #

Build different layouts based on device type:

AdaptiveContainer(
  mobileBuilder: (_) => MobileLayout(),
  tabletBuilder: (_) => TabletLayout(),
  desktopBuilder: (_) => DesktopLayout(),
);

ResponsiveText (1) #

Constructor:

ResponsiveText(
  'Your text here',
  style: TextStyle(fontSize: 16),
  textAlign: TextAlign.center,
);

ResponsiveText (2) #

Constructor:

ResponsiveText(
  'Your text here',
  style: TextStyle(fontSize: 16),
  textAlign: TextAlign.center,
);

Customization #

Base Sizes #

Set custom base width and height:

AdaptiveDesignProvider(
  context: context,
  baseWidth: 360.0,
  baseHeight: 640.0,
  child: MyApp(),
);

Breakpoints #

Set custom breakpoints:

AdaptiveDesignProvider(
  context: context,
  mobileBreakpoint: 480.0,
  tabletBreakpoint: 800.0,
  child: MyApp(),
);

API Reference #

AdaptiveDesignProvider #

Properties:
- size: Provides responsive sizing methods.
- breakpointManager: Manages breakpoints and device types.
- deviceInfo: Provides device and orientation information.

ResponsiveSize #

Methods:
- wp(double percentage): Width as a percentage of screen width.
- hp(double percentage): Height as a percentage of screen height.
- scaleWidth(double size): Scaled width based on base width.
- scaleHeight(double size): Scaled height based on base height.
- scaleFont(double size): Scaled font size.

BreakpointManager #

Properties:
- deviceType: Returns DeviceType.mobile, DeviceType.tablet, or DeviceType.desktop.

DeviceInfo #

Properties:
- orientation: Returns Orientation.portrait or Orientation.landscape.
- isPortrait: true if in portrait mode.
- isLandscape: true if in landscape mode.
- isIOS: true if the platform is iOS.
- isAndroid: true if the platform is Android.

AdaptiveContainer (Usage) #

Constructors:
- AdaptiveContainer({mobileBuilder, tabletBuilder, desktopBuilder})

Usage:

AdaptiveContainer(
  mobileBuilder: (_) => MobileLayout(),
  tabletBuilder: (_) => TabletLayout(),
  desktopBuilder: (_) => DesktopLayout(),
);

Examples #

Responsive Button #

ElevatedButton(
  onPressed: () {},
  child: ResponsiveText(
    'Click Me',
    style: TextStyle(fontSize: 18),
  ),
  style: ButtonStyle(
    padding: MaterialStateProperty.all(
      EdgeInsets.symmetric(
        horizontal: AdaptiveDesignProvider.of(context).size.scaleWidth(20),
        vertical: AdaptiveDesignProvider.of(context).size.scaleHeight(12),
      ),
    ),
  ),
);

Responsive Grid #

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

class ResponsiveGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final deviceType =
        AdaptiveDesignProvider.of(context).breakpointManager.deviceType;
    int crossAxisCount = deviceType == DeviceType.mobile
        ? 2
        : deviceType == DeviceType.tablet
            ? 4
            : 6;

    return GridView.count(
      crossAxisCount: crossAxisCount,
      children: List.generate(20, (index) {
        return Card(
          child: Center(
            child: ResponsiveText('Item $index'),
          ),
        );
      }),
    );
  }
}

Extensions #

Responsive Context Extensions #

ResponsiveSize: Access responsive sizing methods directly from the BuildContext.
```
final size = context.responsiveSize;
```

Responsive EdgeInsets #

EdgeInsets.allR: Create responsive padding with all sides scaled.
```
EdgeInsets padding = EdgeInsets.allR(context, 16);
```

EdgeInsets.symmetricR: Create responsive padding with symmetric scaling.

EdgeInsets padding = EdgeInsets.symmetricR(context: context, horizontal: 10, vertical: 20);

EdgeInsets.fromLTRBR: Create responsive padding from left, top, right, and bottom.
```
EdgeInsets padding = EdgeInsets.fromLTRBR(context, 10, 20, 10, 20);
```

Responsive BorderRadius #

BorderRadius.circularR: Create a responsive circular border radius.
```
BorderRadius radius = BorderRadius.circularR(context, 10);
```
BorderRadius.allR: Create a responsive border radius for all corners.
```
BorderRadius radius = BorderRadius.allR(context, 10);
```

Responsive SizedBox Extensions #

SizedBox.widthR: Create a responsive width SizedBox.
```
SizedBox box = SizedBox.widthR(context, 100);
```
SizedBox.heightR: Create a responsive height SizedBox.
```
SizedBox box = SizedBox.heightR(context, 50);
```
SizedBox.sizeR: Create a responsive SizedBox with both width and height.
```
SizedBox box = SizedBox.sizeR(context, 100, 50);
```

Responsive Number Extensions #

Scaling Methods: Use the following methods to scale sizes responsively:

double width = 100.ws; // Scaled width
double height = 50.hs; // Scaled height
double fontSize = 16.sp; // Scaled font size
double percentageWidth = 5.wp;

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing #

Contributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.

Contact #

For questions or suggestions, feel free to reach out.

Acknowledgements #

Inspired by the strengths of existing responsive packages in the Flutter ecosystem.
Aiming to simplify and enhance responsive design for Flutter developers.

Happy Coding!

🔗 Links #

Version History #

1.0.0
- Initial release with core features.

📜 LICENSE #

Include an MIT License or any other license you prefer in the LICENSE file.