I want to only make a part of my screen scrollable. When the number of items in my ListView exceeds 4 or 5 I am unable to place any widgets below this list view. I am not sure if there is a way to wrap all the contents of the listview to make that scrollable.
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: _getListings(businessListing),
),
This is my ListView and this is how the UI looks
The problem is when the number of RadioTile exceeds 8; the textField and the Button are pushed out of the screen. I am wondering if it is good to make the entire screen scrollable? Or make only a part of the screen containing the RadioTiles Scrollable?
Thanks,
By default, scrollable widgets in Flutter don't show a scrollbar. To add a scrollbar to a ScrollView, wrap the scroll view widget in a Scrollbar widget. Using this widget we can scroll a widget. The scrollbar allows the user to jump into the particular points and also shows how far the user reaches.
We will first declare a PageController that will control the state of the PageView widget. We also specify the index of the initially loaded page. PageController _controller = PageController(initialPage: 0); Define a list of pages to scroll through.
To complete thebuggycoder answer if you want to keep only a part of your screen scrollable but keep variable height bottom elements, you can embed your ListView
inside the Expanded
of a Column
, as shown below:
Column(
children: [
Expanded(
child: ListView(
children: _getListings(businessListing),
),
),
Container(
child: Text('This element must stay at the bottom'),
),
],
);
What are you doing there is basically telling your Column
that it has 2 (or more) elements where each element usually takes the space it needs, except elements that are Expanded
elements and will take "the maximum space left" in the Column
.
There are a couple of points to consider:
If you plan to have more fields below the RadioTiles
along with the Google Listing URL and the Save button, then it might be a good option to keep the entire screen scrollable.
On the other hand, if it's going to be just the two things below the RadioTiles
, then it would be better to keep only the RadioTile
list to be scrollable. This way the TextField
and the Save button will always be accessible to the user without the need to scroll.
Also, you can decide about the scrolling depending on the priority of the fields. If the TextField
and Save button have more priority then it would be best if they are always visible on the screen.
To make only a part of the screen scrollable, you can wrap the ListView
in a Container
with some fixed height, so that the it will scroll only within those bounds.
You will also need to change the physics
property to AlwaysScrollableScrollPhysics()
.
Example -
Container(
height: 300.0 //Your custom height
child: ListView(
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
children: _getListings(businessListing),
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With