CODEWITHSUNDEEP
iosflutterlistview
Benipro98
Benipro98

Reputation: 313

Flutter: ListView has gap at beginning

I've started with Flutter a few months ago and trying to implement my first app. The app should display a simple scrollable profile view. Therefore I used a ListView inside a Scaffold to make the screen scrollable. As children of the ListView I display the things I want to display.

This works fine so far. The only issue I'am facing is, that the listView has a weird gap between the beginning of the Scaffold (red in the screenshot) and the start of the ListView. I think this doesn't look very nice and would like to know if I can get of this gap? Weird gap between ListView and Scaffold

I have already tested if this issue has something to do with previous paddings, but if I add a normal Text-Widget to the Scaffold it gets displayed at the beginning of the Scaffold.

My code looks as follows:

Scaffold(
  backgroundColor: Colors.red,
  body: Padding(
    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
    child: ListView(
      children: [
        Text('Status'),
        SizedBox(
          height: 10.0,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40.0),
          child: Container(
            child: Text(
              'Das hier ist ein Beispieltext disaidhasjdiojsaiodjisajdioajs',
              textAlign: TextAlign.center,
              style: Theme.of(context)
                  .textTheme
                  .headline3
                  .copyWith(fontStyle: FontStyle.italic),
            ),
          ),
        ),
        ... //More Widgets
       ],
    ),
  ),
)

Upvotes: 5

Views: 1588

Answers (1)

mkobuolys
mkobuolys

Reputation: 5333

By default, ListView has some padding applied, it's mentioned in the official documentation (https://api.flutter.dev/flutter/widgets/ListView-class.html):

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

As mentioned there, just override the padding value inside ListView:

ListView(
  padding: const EdgeInsets.all(0), // or const EdgeInsets.symmetric(vertical: 0) for vertical padding only
  children: [...],
)

If that's not the case, I would recommend you to check whether you actually need the Scaffold widget to wrap your ListView.

Upvotes: 10

Related Questions