Question 310553 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How To add padding to `SingleChildScrollView`

How do I prevent the SingleChildScrollView from overflowing. I tried adding padding but that does not seem to work as I Intended.

For example:
this is what it looks like when it first loads.

enter image description here

However whenever the user scrolls, it ends up overlapping some of the widgets. I would like to contain this scrollable widget in the area underneath the ‘Your Trips’ widget.

enter image description here

Tags:

2

Answers


  1. 0

    To have this answered this completely, you’d need to include code. However, there’s what stands out immediately is that you’re using a SingleChildScrollView for a list of items. This draws out the entire widget and then simply scrolls it; you could probably apply clipping using the clipBehavior property which should stop the items from being shown under your header but that wouldn’t be a good solution as anything outside the clip area is still going to have to be drawn. You want to avoid things like that as much as possible to reduce the amount of work flutter has to do to display your app. For a 20 item list this isn’t a huge deal but if it were to have 200 it would be.

    A better solution would be to use one of the ways of building out a list in flutter that supports scrolling inherently – ListView being the most obvious of those. One thing to be careful of is that if a vertically scrolling list view is in a column as I’d guess from your UI, you’d need to wrap it in an Expanded widget to have it behave properly.

    An even better solution would be to use slivers i.e. a CustomScrollView in combination with a SliverList or possibly SliverFixedExtentList to show the items. This would allow you to have control over how the top elements (i.e. "Your Trips") behaves when the list is scrolled. The flutter website has a guide for how to use slivers.

    Login or Signup to reply.
  2. 0

    try to remove SingleChildScrollView and replace the body with ListView

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search