The 'body' part is not visible after using ' bottomNavigationBar' in Flutter

Question

Whenever i use the bottomNavigationBar: it dose not show the body: part on screen but when i remove the bottomNavigationBar: then it shows the body: Here is the code

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home', textAlign: TextAlign.center),
        actions: <Widget>[],
        backgroundColor: Color(0xffd81b60),
      ),
      bottomNavigationBar: _getNavBar(context),

      body: ListView(children: <Widget>[
        SizedBox(height: 300.0),
        Container(
          height: 50,
          width: 10,
          child: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => mealwisePage()));
              },
              color: Colors.pink,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Meal Wise',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),), ), ), ), ]),);}
_getNavBar(context) {
  return Stack(
    children: <Widget>[
      Positioned(
        bottom: 0,
        child: ClipPath(
          clipper: NavBarClipper(),
          child: Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                  Colors.pink,
                  Colors.pink.shade800,
                ])), ),),),],);}

No error is showing just body is invisible on the screen

Any Solution Please?

score 5 · Accepted Answer · answered Jan 18 '20 at 08:45

I fount that it is because of using Stack it overlaps with body so i changed it from:

return Stack(
    children: <Widget>[
      Positioned(
        bottom: 0,
        child: ClipPath(
          clipper: NavBarClipper(),
          child: Container(),),)],)

To

return Container(
      height: 90,
      child: Stack(
        alignment: Alignment.bottomCenter,
    children: <Widget>[
      Positioned(
        bottom: 0,
        child: ClipPath(
          clipper: NavBarClipper(),
          child: Container(),),),],),)

griffins · Answer 2 · 2020-01-17T15:54:10.050

bottom navigation is part of scaffold constructor Widget bottomNavigationBar and not the body hence refactor your code as shown below

     Scaffold(
      appBar: AppBar(
        title: const Text('Home', textAlign: TextAlign.center),
        backgroundColor: Color(0xffd81b60),
      ),
      resizeToAvoidBottomPadding: false,

      body: ListView(children: <Widget>[
        Container(
          child:Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.fromLTRB(15.0, 40.0, 40.0, 25.0),
                child: Center(
                  child: Text(
                    'Home',
                    textAlign: TextAlign.center,
                  ),),), ], ),),
        SizedBox(height: 200.0),         

    ]),//listview
 bottomNavigationBar: _getNavBar(context),
);//scaffold

update edit

child: Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,

you must give a value to this width: MediaQuery.of(context).size.width, example width: MediaQuery.of(context).size.width * .98,

The code is as it is as you are saying,Actually while posting the question stackoverflow suggest me to reduce the code so while reducing the code it becomes like this sorry for that now i have updated the code in question. — Sanwal Ijaz, Jan 17 '20 at 14:43
did'nt work for me, actually this is not the complete code and i am unable to post complete code in the question.here is complete code of bottom navigation bar that i used: https://github.com/stevendz/customappbar_yt/blob/master/lib/main.dart — Sanwal Ijaz, Jan 17 '20 at 16:40
i identified , it is because of Stack Widget so i used it in a container with height:100 now everything is visible above the container,so please tell me if you know any other good approach. — Sanwal Ijaz, Jan 17 '20 at 19:43

The 'body' part is not visible after using ' bottomNavigationBar' in Flutter

2 Answers2