Search code examples
flutterdartnavigationnavbar

remove white space between body and nav bar


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

enter image description here

and this is UI image I try to code

enter image description here

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,
                    ),
                  ),
                ],
              ),
            ),
          ),
        )