Flutter - whitespaces displaying for image in portrait and landscape

Question

I keep seeing lot of white space if I do landscape or portrait within my image. I do need the slidable so didn't want to tweak the code too much, but I do want it to look representable

is there something wrong with my code?

I did add a picture this is happening in both landscape and portrait mode

  @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: new Text(
                  "1 Alif-laam-meem آلم, Pg2",
                  style: new TextStyle(color: styling.appBarTextcolor),
                ),
                leading: new IconButton(
                    icon: new Icon(styling.appBarBackArrowIcon),
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => NavDrawer(),
                          ));
                    })),
            body: LayoutBuilder(builder:
                (BuildContext context, BoxConstraints viewportConstraints) {
              return SingleChildScrollView(
                  child: Stack(children: <Widget>[
                new Slidable(
                  delegate: new SlidableDrawerDelegate(),
                  actionExtentRatio: styling.sizeofenglishandforward,
                  child: SafeArea(
                    top: true,
                    bottom: true,
                    right: true,
                    left: true,
                    child: new Container(
                      child: new Image.asset(
                        "test/assets/Para 1 - Alif-laam-meem no color/quranpg2-1.png",
                        // fit: BoxFit.fitidth,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  actions: <Widget>[
                    new IconSlideAction(
                        caption: styling.englishIconText,
                        color: styling.englishIconColorstripe,
                        icon: styling.englishIcon,
                        foregroundColor: styling.englishIconColor,
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Changepg2topg2Color()),
                          );
                        }),
                    new IconSlideAction(
                      caption: styling.forwardIconText,
                      color: styling.forwardIconColorstripe,
                      icon: styling.forwardIcon,
                      foregroundColor: styling.forwardIconColor,
                      // onTap: () {
                      //   Navigator.push(
                      //     context,
                      //     MaterialPageRoute(builder: (context) => Changepg2topg3()),
                      // );
                      // }
                    ),
                    // ),
                  ],
                  secondaryActions: <Widget>[
                    new IconSlideAction(
                      caption: styling.backIconText,
                      color: styling.backIconColorstripe,
                      icon: styling.backIcon,
                      foregroundColor: styling.backIconColor,
                      // onTap: () => _showSnackBar('More'),
                    ),
                    new IconSlideAction(
                      caption: styling.arabicIconText,
                      color: styling.arabicIconColorstripe,
                      icon: styling.arabicIcon,
                      foregroundColor: styling.arabicIconColor,
                      // onTap: () =>
                    ),
                  ],
                ),
              ]));
            }));
      }
    }

Solution

SafeArea is preventing your image to go at some restricted areas of screen like, underneath the notch area. Or for some devices there are NavigationKeys in the bottom of screen. Try removing these

Cheers :)

child: SafeArea(
            top: true,
            bottom: true,
            right: true,
            left: true,

Comments

[shahbaz]

Thank you Hamza, I changed the safe area value of true to false and its working :) for portrait mode . But when I do it in Landscape mode I still see lot of white space ill update the image

[Hamza]

You are using SafeArea try removing it. If it works, then i think the prevention from Notches and Bottom navigations keys are True in it. Give it a shot :)

[shahbaz]

Hi I did try removing safeArea it is working for Portrait but not landscape.. is there anything else I can do?

[Hamza]

I think there might be some dimensional issues with the image. Otherwise these were the possible solutions that I could think off :(

[shahbaz]

brother I need help with this one if you have time stackoverflow.com/questions/64548263/…