I’m new to flutter and this is my first try, I’m trying to remove space between body and nav bar that highlighted below
and this is UI image I try to code
I make safeArea bottom false and nothing change,
SafeArea(
bottom: false,
also I use Expanded widget for restaurants scrolling,
body code:
```flutter
body: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.all(24.0),
child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Hello Shaden",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w600,
)),
Text("Let's find you table",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
)),
SizedBox(height: 10),
Container(
child: TextField(
onChanged: (value) => runFillter(value),
obscureText: false,
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon: Icon(Icons.search),
hintText: "Search",
contentPadding: EdgeInsets.symmetric(vertical: 8),
filled: false,
),
),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(16)),
),
SizedBox(height: 10),
SizedBox(
height: 30,
child: FoodList(selected, (int index) {
setState(() {
selected = index;
});
pageController.jumpToPage(index);},
food),
),
SizedBox(height: 20),
Expanded(
child:ResturantMenu(searchState,
foundRes,
selected,
(int index){
setState(() {
selected = index;
});
},
pageController,
food
)
)],
),
),
),
### navigation bar code :
bottomNavigationBar: Container(
color: Colors.grey,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: NavigationBar(
height: 60,
onDestinationSelected: (int index) {
setState(() {
currentPageIndex = index;
});
},
selectedIndex: currentPageIndex,
destinations: const <Widget>[
NavigationDestination(
selectedIcon: Icon(Icons.home,size: 30,color: Colors.amber),
icon: Icon(Icons.home_outlined,size: 30,color: Colors.black),
label: '',
),
NavigationDestination(
selectedIcon: Icon(Icons.notifications,size: 30, color: Colors.amber),
icon: Icon(Icons.notifications_outlined,size: 30, color: Colors.black),
label: '',
),
],
),
),
),
>Solution :
Use extendBody: true and remove bottom padding that’s all.
Scaffold(
extendBody: true,
body: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24) + const EdgeInsets.only(top:24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Hello Shaden',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w600,
),
),
const Text(
"Let's find you table",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(16),
),
child: TextField(
onChanged: runFillter,
style: const TextStyle(
fontSize: 12,
color: Colors.black,
),
decoration: const InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon: Icon(Icons.search),
hintText: 'Search',
contentPadding: EdgeInsets.symmetric(vertical: 8),
filled: false,
),
),
),
const SizedBox(height: 10),
SizedBox(
height: 30,
child: FoodList(
selected,
(int index) {
setState(() {
selected = index;
});
pageController.jumpToPage(index);
},
food,
),
),
const SizedBox(height: 20),
Expanded(
child: ResturantMenu(
searchState,
foundRes,
selected,
(int index) {
setState(() {
selected = index;
});
},
pageController,
food,
),
),
],
),
),
),
)