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?

Answer 1

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

Answer 2

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,