Flutter: How to use responsive builder

user_12324919 0
Viewed 1407

How to use this responsive package in my following code. This is the link to the responsive package https://pub.dev/packages/responsive_builder

class FirstPage extends StatefulWidget {
 @override
_FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override


  Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
  body: Container(
    color: Colors.white,
    child: ListView(
      children: <Widget>[
        Container(
          height: SizeConfig.safeBlockVertical * 80,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/background2.gif"),
              fit: BoxFit.fill,
            ),
          ),
        ),
responsive-design flutter responsive
1 Answers

It looks like the SizeConfig class you're using is from this article and I personally haven't used that before. Nevertheless, using the responsive builder package is super simple.

First, replace your existing build method with something like this:

Widget build(BuildContext context) {
    return ScreenTypeLayout(
      mobile: mobileLayout(),
      tablet: tabletLayout(),
      desktop: desktopLayout(),
      watch: watchLayout(),
    );
}

When your FirstPage widget is built, the ScreenTypeLayout widget will automatically handle which "layout" widget should be returned based on the screen size. Inside each of the layout widgets, you can add another branch to the decision tree like this:

Widget mobileLayout(){
  // Return a widget function per orientation
  return OrientationLayoutBuilder(
    portrait: (context) => mobilePortrait(),
    landscape: (context) => mobileLandscape(),
  );
}

You can create each individual widget separately and then plug them into each layout how you see fit (ex. plugging them into Rows and Columns in the layout widgets).

user_128069610
Related