class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SuperResponsive(
      breakPoints: BreakPoints(
        // you can add up to 6 breakpoints
        // first and second are required!
        first: 1200,
        second: 900,
        third: 600,
      ),
      child: MaterialApp(
        title: 'Super Responsive App',
        initialRoute: '/',
      ),
    );
  }
}

...
/// in a more graphical way
/// breakpoints extremes -> [600, 1200]
/// our value's range -> [100, 500]
/// when screen width == 800 in the range of [600, 1200], 
/// this value will be mapped to the range of [100, 500]
/// and it will return the value = 233.333
/// all this calculation is made by the (mapValue) function,
/// that can also be used by you in any way you want to.

@override
Widget build(BuildContext context) {
  return Container(
    width: context.responsiveValue(100, 500),
    height: 300,
    color: Colors.red,
  );
}
...

...
@override
Widget build(BuildContext context) {
  return Container(
    // context.breakpoints will return the breakpoints
    // of the closest SuperResponsive widget in the widget tree
    width: context.breakpoints.when(
      first: (breakpoint) => breakpoint*0.5, // 50% of the breakpoint
      second: (_) => 300, // 300px
      third: (_) => context.responsiveValue(100, 300), // or a responsive value
      fourth: (_) => 50, // we don't have a fourth breakpoint in our SuperResponsive widget,
      // so it will return the last valid case, in this case third: (_) => context.responsiveValue(100, 300)
    ),
    height: 300,
    color: Colors.red,
  );
}
...

...
@override
Widget build(BuildContext context) {
  return Container(
    width: context.customReponsiveValue(
    // you can use some of your breakpoints, or any
    // other value that you want
    breakpointsRange: (breakPoints) => 
        Range(breakpoints.second, breakpoints.first),
    valueRange: Range(100, 500),
  ),
    height: 300,
    color: Colors.red,
  );
}
...

...
@override
Widget build(BuildContext context) {
  return ResponsiveWidget(
    // The amount of widgets must be equal to the amount 
    // of breakpoints we have specified in our SuperResponsive widget
    children: [
      WidgetLarge(),
      WidgetMedium(),
      WidgetSmall(),
    ],
    // ! we can also specify new breakpoints for only this widget
    // ! this will override the breakpoints of the SuperResponsive widget
    // ! and the amount of children must be equal to these new breakpoints
    // breakpoints: BreakPoints(
    //   first: 1000,
    //   second: 800,
    //   third: 500,
    // ),
  );
}
...

...
@override
Widget build(BuildContext context) {
  return ResponsiveText(
    text: "Super Responsive",
    fontSizeRange: Range(20, 30),
    // ! we can also specify custom breakpoints for only this widget
    // ! this means that the result of the responsive value set 
    // ! for the font size, will be set to the closest value of the
    // ! textBreakpoints. For example, if the value should be
    // ! 17, it will be set to 17 because it is the closest value from the 
    // ! set of textBreakpoints 
    // textBreakpoints: [
    // 30,
    // 15,
    // 20,
    // ]
  );
}
...

...
@override
Widget build(BuildContext context) {
  // ! it'll return a SizedBox square with dimension equal
  // ! to the responsive value of range [100, 300]
  return ResponsiveGap(100, 300);
  
  // ! you can also create an "INVERSE" gap, which will 
  // ! have as a dimension the inverse value. For example,
  // ! if the value is 300 and the range is [100, 300],
  // ! it will have a final value of 100
  return ResponsiveGap(100, 300, reversed: true);
}
...

...
@override
Widget build(BuildContext context) {
  return ResponsiveLayout(
    layoutCount: 3,
    children: [
      Widget0(),
      Widget1(),
      Widget2(),
      Widget3(),
      Widget4(),
    ],
    // ! you can use any breakpoints you want
    breakpoints: (breakpoints) => breakpoints,
    layouts: (child) => [
      // ! Some complex layout with multiple Rows and Columns
      Column(
        children: [
          // ! the function child() will return the child 
          // ! of that specific index => child(0) == Widget0()
          Row(children:[child(1), child(0)]).expanded(),
          // ! .expanded({int flex}) is an extension on Widget
          // ! it can be used if you want to wrap your widget inside 
          // ! an Expanded widget, it has been mainly created to make your
          // ! layout more readable and to be used by Columns or Rows
          Row(children:[child(2), child(2)]).expanded(flex: 2),
          // ! there is also the extension .flexible({int flex, FlexFit fit})
          child(3).flexible(flex: 2),
        ]   
      ),
      // ! some very simple layout
      Row(children:[child(3), child(3)]),
      // ! or just return one of your children
      child(4),
    ]
  );
}
...

double responsivePercentageValue({
required double valuePercentage,
required Range? valueRange,
required double limit,
}){}

...
@override
Widget build(BuildContext context) {
  return Container(
    // width will be always 50% of the current screen width
    width: context.percentageValueWidth(50),
    // height will be 50% of the screen height but clamped to the value of the 
    // given range
    height: context.percentageValueHeight(50, Range(100, 300)),
    color: Colors.red,
  );
}
..

...
@override
Widget build(BuildContext context) {
  return PercentageValueBuilder(
    // you can specify if this widget should use the screen size to calculate 
    // the percentage value or its constraints
    //useScreenSize: true
    builder: (
      context,
      cosntraints, // BoxConstraints given by a LayoutBuilder
      breakpoints, // breakpoints form the closest SuperResponsive widget
      // these two functions will calculate an specified percentage of the 
      // available space (constraints.maxWidth/maxHeight) or the screen width/height 
      // if useScreenSize is set to true 
      percentageValueWidth, 
      percentageValueHeight,
    ) => Container(
          width: percentageValueWidth(50) // width will be always 50% of the screen width
          // height will be 50% of the screen height but clamped to the value of the 
          // given range
          height: percentageValueHeight(50, Range(100, 200))
      ),
  );
}
...