Виджеты в моем теле перестали работать после добавления нижней панели навигации во флаттер

Question

Я попытался добавить в свой проект нижнюю панель навигации. Как только я закончил нижнюю панель навигации - все мои виджеты под основным телом не отображаются. Android studio не показывает никаких ошибок, но все равно получает пустой экран с только панелью навигации внизу.

Если я удалю нижнюю панель навигации, все мои виджеты (контейнер, изображение) под телом автоматически запускаются работает как обычно.

Я не понимаю, что не так с панелью навигации.

Я изо всех сил старался найти проблему, но не нашел. Я ищу помощь по этому поводу. Я прикрепил свой код ниже

Код:

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

Когда вы видите, что контент скрывается из-за добавления чего-то еще, обычно это происходит потому, что это «что-то еще» перекрывает ваш контент. Весь ваш контент там, он просто спрятан за виджетом Align.

Я понял это, заключив виджет Align в виджет Container с цветом Colors.yellow:

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

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

введите описание изображения здесь

Я думаю, вы добавили виджет Align ранее, чтобы гарантировать, что bottomBar прилипает к нижней части, но с помощью параметра bottomNavigationBar из Scaffold, чтобы добавить виджет нижней панели навигации уже делает это за вас.