<!-- 
This README describes the package. If you publish this package to pub.dev,
this README's contents appear on the landing page for your package.

For information about how to write a good package README, see the guide for
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). 

For general information about developing packages, see the Dart guide for
[creating packages](https://dart.dev/guides/libraries/create-library-packages)
and the Flutter guide for
[developing packages and plugins](https://flutter.dev/developing-packages). 
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
-->

## Overview

Responsive UI is a must in today's world. We have devices of several sizes, like smart phones and
tablets which differ in sizes and there we require a responsive UI which changes it's size based on
size of device.<br>
Also using flutter we can build web and desktop applications too along with mobile applications which also requires the UI to be responsive based on different screen sizes.

<br>So we at Techy Panther tried to make responsive UI more easy to use for developers using this
SizeConfig package.
<br> There are two types of methods are available:
    - First, where we use percentage as values passed to height and width.
    - Second, where we use original values that are changed according to screen size.

## Features

- Get relative height and width for widgets with two different methods: 
  - By using original values as mentioned in design.
  - By using percentage values of height and width.
- Get relative font size with respect to screen size.
- Spacer with relative height and width with original values as well as percentage values.

## Getting started

There are several extensions available for values as mentioned below:
- (width).w : For original width of widgets that will be changed by the extension based on device and UI design screen ratio.
- (height).h : For original height of widgets that will be changed by the extension based on device and UI design screen ratio.
- (<fontSize).sp : For original font size of text that will be changed by the extension based on device and UI design screen ratio.
- (widthPercentage).wp : For percentage value of width of widget with respect to screen size.
- (heightPercentage).hp:  For percentage value of width of widget with respect to screen size.


## Usage

```dart
Widget buildResponsiveWidget(BuildContext context) {
  LayoutBuilder(
    builder: (context, constraints) {
      // initializing SizeConfig
      // reference height and width of UI design from Adobe XD,Figma or any other tool
      SizeConfig().init(context: context,
          safeAreaBox: constraints,
          referenceHeight: 800,
          referenceWidth: 360);
      SizeConfig().init(context, constraints);
      return Column(
        children: [
          Text("Font Size SizeConfigValue: ${20.sp}",style: TextStyle(fontSize:20.sp),),
          SizeConfigPercentage.verticalSpacer(10),
          Text("Width SizeConfigValue: ${20.w}"),
          Text("Width SizeConfigPercentage: ${20.wp}"),
          SizeConfigValue.verticalSpacer(10),
          Text("Height SizeConfigValue: ${20.h}"),
          Text("Height SizeConfigPercentage: ${20.hp}"),


        ],
      );
    },
  );
}
```
    

[comment]: <> (## Additional information)

[comment]: <> (TODO: Tell users more about the package: where to find more information, how to )

[comment]: <> (contribute to the package, how to file issues, what response they can expect )

[comment]: <> (from the package authors, and more.)
