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: () =>
                    ),
                  ],
                ),
              ]));
            }));
      }
    }

score 2 · Accepted Answer · answered Oct 21 '20 at 13:28

2

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,

answered Oct 21 '20 at 13:28

Hamza

1,523
15
33

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 – shahbaz Oct 23 '20 at 19:39
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 :) – Hamza Oct 24 '20 at 06:16
Hi I did try removing safeArea it is working for Portrait but not landscape.. is there anything else I can do? – shahbaz Oct 25 '20 at 07:08
I think there might be some dimensional issues with the image. Otherwise these were the possible solutions that I could think off :( – Hamza Oct 25 '20 at 10:56
brother I need help with this one if you have time https://stackoverflow.com/questions/64548263/flutter-how-to-disable-switch-within-the-settings-menu-and-how-to-ensure-no-de – shahbaz Oct 27 '20 at 04:21

Flutter - whitespaces displaying for image in portrait and landscape

1 Answers1