How to prevent a listview to overflow under a bottom nav bar in flutter?

user_15956102 0
Viewed 1251

I want a listview whose bottom ends just above the bottom navigation bar, except my listview's bottom overflows under the navigation bar. Is there a way to constrain the listview to be sandwiched between the appbar and bottom navigation bar?

I have a widget hierarchy that looks like this:

Scaffold(
  appbar: ...
  body: Column(
    children: [
      ...
      ListView(...)
    ]
  )
  bottomNavigationBar: ...
)
flutter-layout dart flutter
3 Answers

Try to use Expanded for largest widget in Column:

Scaffold(
  appbar: ...
  body: Column(
    children: [
      ...
      Expanded(child:ListView(...)),
    ]
  )
  bottomNavigationBar: ...
)
user_112764160

Try to set the scaffold's extendBody extendBody property value to false.

Scaffold(
  appBar: AppBar(...),
  extendBody: false,
  body: Column(...),
  bottomNavigationBar: BottomNavigationBar(...)
)
user_54163210

I hope it might work in your case.

Use SingleChildScrollView in the ListView. Don't forget to mention the Scroll Direction.

Scaffold(
 appbar: ...
  body: Column(
   children: [
    ...
    SingleChildScrollView(
      child: ListView(...)
    )
   ]
  )
  bottomNavigationBar: ...
)
user_145046320
Related