responsive_s 1.0.1+1
responsive_s: ^1.0.1+1 copied to clipboard

Responsive pachage that control size and font as you want to make responsive.

Responsive Logo

Pub.dev Badge

Responsive_s #

Build any app with your optional responsive for width ,height and font size.

Responsive give many optional parameters to control responsive way:

  • fromPhysicalDimension means the length and all value will be calculated from device width and height.
  • fromRealDimension means the length and all value will be calculated from real width and height depending on device orientation.
  • Now,you can initial value for any device or for all device through "forUnInitialDevices" parameter.
  • The package automatically detect screen type;

Usage #

@override
Widget build(BuildContext context) {
  Responsive _responsive = new Responsive(context);
  List<Widget> _circularAvatar = List<Widget>.generate(
      3,
          (index) =>
          CircleAvatar(
            radius: _responsive.responsiveValue(
                forUnInitialDevices: 5,
                forDesktopScreen: 10,
                forPortraitMobileScreen: 5),
          ));

  Container _container = Container(
      color: Colors.red,
      //responsive value can be used as responsive font size.
      child: Text(_responsive.screenType.toString(), style: TextStyle(
          fontSize: _responsive.responsiveValue(forUnInitialDevices: 5)
      ),),
      width: _responsive.responsiveWidth(forUnInitialDevices: 80),
      height: _responsive.responsiveHeight(forUnInitialDevices: 60));
  Widget _mobile = Column(
    mainAxisSize: MainAxisSize.max,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: _circularAvatar,
      ),
      _container
    ],
  );
  Widget _desktop = Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: _circularAvatar,
      ),
      SizedBox(width: _responsive.responsiveWidth(forUnInitialDevices: 2),),
      _container
    ],
  );
  return Scaffold(
      appBar: AppBar(),
      body: _responsive.responsiveWidget(
          forUnInitialDevices: _desktop,
          forPortraitMobileScreen: _mobile,
          forPortraitTabletScreen: _mobile)
  );
}

Result:

desktop size tablet landscape

tablet portriat test result

Overview: #

Until now,this package offer many responsive function depending on device:

  • you can now initial different length and value depending on device to make your app responsive.
  • Responsive value is created to use it as responsive value for font size , radius or any another value.
  • Responsive function and responsive widget return function and widget depending on screen.
4
likes
110
pub points
42%
popularity

Responsive pachage that control size and font as you want to make responsive.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_s