responsive_s 1.1.1 copy "responsive_s: ^1.1.1" to clipboard
responsive_s: ^1.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.
5
likes
150
points
94
downloads

Publisher

unverified uploader

Weekly Downloads

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

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on responsive_s