CODEWITHSUNDEEP
flutterdartflutter-layout
Amanuel Ephrem
Amanuel Ephrem

Reputation: 55

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

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: ...
)

Upvotes: 5

Views: 2720

Answers (3)

Emad Adly
Emad Adly

Reputation: 131

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

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

Upvotes: 3

Jim
Jim

Reputation: 7601

Try to use Expanded for largest widget in Column:

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

Upvotes: 6

karthik raja
karthik raja

Reputation: 11

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: ...
)

Upvotes: 0

Related Questions