Widgets in my body stopped working after adding Bottom Navigation bar in flutter

Question

I tried adding a bottom navigation bar to my project. As soon as I have finished the bottom navigation bar - all my widgets under the main body isn't displaying. Android studio is not showing any error but still am getting the blank screen with only navigation bar at the bottom.

If I remove the bottom navigation bar all my widgets(container, image) under the body automatically start working as normal.

I am not getting what's wrong with the navigation bar.

I tried my best looking for the issue but can't found any I looking for a help on this. I attached my code below

Code:

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: bottomBar(context),
      body: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [const Color(0xFFffd194), const Color(0xFF70e1f5)],
              begin: FractionalOffset.topLeft,
              end: FractionalOffset.bottomRight,
              stops: [0.1, 1.0],
              tileMode: TileMode.clamp),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(
              image: AssetImage('assets/bout1.png'),
            ),
          ],
        ),
      ),
    );
  }

  //widget for bottom navigation bar starts here

  Widget bottomBar(BuildContext context) {
    return Align(
      alignment: Alignment(-1, 1),
      child: Container(
        padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
        height: 60,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black12,
            width: 1,
          ),
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded(
                flex: 1,
                child: IconButton(
                  highlightColor: Colors.red,
                  splashColor: Colors.greenAccent,
                  icon: Icon(
                    Icons.home,
                    color: Color(0xffa1a5b5),
                  ),
                  iconSize: 28,
                  onPressed: () {
                    Navigator.of(context).pushNamed('/Login');
                  },
                )),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.swap_horiz,
                  color: Color(0xffa1a5b5),
                  size: 28,
                ),
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                icon: Icon(
                  Icons.show_chart,
                  color: Color(0xffa1a5b5),
                ),
                iconSize: 28,
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.notifications_none,
                  color: Color(0xffa1a5b5),
                ),
                onPressed: () {},
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                iconSize: 28,
                icon: Icon(
                  Icons.person_outline,
                  color: Color(0xffa1a5b5),
                ),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Whenever you see content being hidden because of adding something else, it's usually because that 'something else' is overlapping your content. Your content is all there, it's just hidden behind the Align widget.

I figured this out by wrapping the Align widget in a Container widget with color Colors.yellow:

  Widget bottomBar(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Align(...),
    );
  }

When I remove the Align widget, everything seems to work correctly:

I guess you had added the Align widget earlier to ensure that the bottomBar sticks to the bottom but using the bottomNavigationBar parameter of the Scaffold to add your bottom navigation bar widget already does that for you.