'body' становится невидимым после использования BottomNavigationBar: BottomAppBar

Question

При использовании BottomNavigationBar: BottomAppBar тело не отображается на экране. Но когда я его передвигаю, на экране отображается тело. Поскольку у меня нижняя панель навигации находится за пределами основного тела, как и должно быть, очень непонятно, почему содержимое тела просто становится невидимым, когда нижняя панель навигации находится в коде.

Изменить: интересно, нужно ли изменить тело с "нового контейнера" на что-то еще, поэтому я включил так много кода.

Вот код:

Widget build(BuildContext context) {
return new Scaffold(
  appBar: AppBar(
    title: const Text('Refine'),
    backgroundColor: Color(0xFFffffff),
  ),
  body: new Container(
    width: MediaQuery.of(context).copyWith().size.width,
    child: ListView(
      shrinkWrap: true,
      children: <Widget>[
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Sort By',
                  style:
                  TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'Relevance',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'Top Rated',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'New',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Category',
                  style:
                  TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('All Categories'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Location',
                  style:
                  TextStyle(color: Colors.black,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget> [
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('Illinois'),
                      ),
                    ),
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('Chicago'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Price',
                  style:
                  TextStyle(color: Colors.black,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Row(
                  children: <Widget>[
                    new Text(
                      '\$',
                    ),
                    new Text(
                      'To',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
  bottomNavigationBar: BottomAppBar(
    child: new Container(
      padding: EdgeInsets.only(
        top: 20.0,
        bottom: 20.0,
        left: 25.0,
        right: 25.0,
      ),
      decoration: BoxDecoration(
        color: Color(0xFFffffff),
      ),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new SizedBox(
            width: double.infinity, child: RaisedButton(
            color: Color(0xFF2e616f),
            textColor: Colors.white,
            onPressed: () {},
            child: Text('Apply',
                style: new TextStyle(fontSize: 14.0)),
          ),
          ),
        ],
      ),
    ),
  ),
);

}

Answer 1

Проблема именно в этой строке в нижней панели навигации SizedBox:

width: double.infinity

Вместо того, чтобы использовать вышеуказанное, рассмотрите возможность использования следующего:

width: MediaQuery.of(context).size.width - 50

"- 50" учитывает отступ слева и справа, каждый по 25.

Ри ми Русселе опубликовал здесь хорошее объяснение, объясняющее разницу между double.infinity и MediaQuery: В чем разница между double.infinity и MediaQuery?.