页面内容覆盖导航底栏

Question

This page content in overview.dart is currently blocking the navigation bottom bar. The content is a scrolling page. I want to be able scroll overview.dart page content with it not covering navigation bottom bar. So both page content and fixed bottom bar can be seen while scrolling.

My navigation tabs is created in a different page.

Navigation_tab.dart:

import 'package:flutter/material.dart';
class NavigationTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.cyan[700],
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            notchMargin: 4.0,
            child: new Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: Colors.cyan[700],
                    ),
                    onPressed: () {},
                  ),
                  new Container(
                      padding: EdgeInsets.only(left: 20),
                      child: IconButton(
                        icon: Icon(
                          Icons.menu,
                          color: Colors.cyan[700],
                        ),
                        onPressed: () {},
                      )),
                  new Container(
                      padding: EdgeInsets.only(left: 120),
                      child: IconButton(
                        icon: Icon(
                          Icons.explore,
                          color: Colors.cyan[700],
                        ),
                        onPressed: () {},
                      )),
                  new Container(
                      height: 22.0,
                      child: new RawMaterialButton(
                        onPressed: () {},
                        child: new Icon(
                          Icons.person,
                          color: Colors.white,
                          size: 20.0,
                        ),
                        shape: new CircleBorder(),
                        elevation: 1.0,
                        fillColor: Colors.cyan[700],
                      ))
                ])));
  }
}

The page where it runs the app:

Overview.dart:

import 'package:flutter/material.dart';
import '../ui/navigation_tab.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class Overview extends StatelessWidget {
  static const routeName = "/navigation";

  Widget _buildLevelCard() {
    return new SizedBox(
        width: 380,
        height: 140,
        child: new Card(
            child: new Column(children: <Widget>[
          new ListTile(
              title: new Text("title"),
              subtitle: new Text("sub")),
          new Container(
              padding: EdgeInsets.all(5),
              child: new Row(children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(right: 7),
                  child: new RaisedButton.icon(
                      color: Colors.lightBlueAccent[400],
                      icon: Icon(
                        Icons.navigate_next,
                        color: Colors.white,
                      ),
                      label: new Text(
                        "Button",
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () => {},
                      shape: new RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(30.0))),
                ),
                new RaisedButton.icon(
                    color: Colors.deepPurple[400],
                    icon: Icon(
                      Icons.navigate_next,
                      color: Colors.white,
                    ),
                    label: new Text(
                      "Button",
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () => {},
                    shape: new RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(30.0)))
              ]))
        ])));
  }

  Widget _buildCarousel() {
    return new SizedBox(
        width: 380,
        height: 180,
        child: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              "http://via.placeholder.com/150x100",
              fit: BoxFit.fill,
            );
          },
          itemCount: 5,
          viewportFraction: 0.8,
          scale: 0.9,
          control: new SwiperControl(),
        ));
  }

  Widget _buildSearchCard() {
    return new SizedBox(
        width: 380,
        height: 140,
        child: new Card(
            child: new Column(children: <Widget>[
          new ListTile(
              title: new Text(
            "Test",
          )),
          new Container(
              padding: EdgeInsets.all(5),
              child: new Row(children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(right: 7),
                )
              ]))
        ])));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan[700],
      appBar: AppBar(
        title: Text('Dashboard'),
      ),
      body: new Stack(
        alignment: Alignment.center,
        children: <Widget>[
          NavigationTabs(),
          SingleChildScrollView(
            child: Container(
              child: new Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(5),
                    child: new ListTile(
                      title: new Text("Title"),
                      subtitle: new Text("Sub"),
                    ),
                  ),
                  _buildLevelCard(),
                  Padding(
                    padding: EdgeInsets.all(5),
                    child: _buildCarousel(),
                  ),
                  _buildSearchCard(),
                  _buildSearchCard(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

See that the scrollable page content is covering the navigation bottom bar.

Answer 1

This is caused by having multiple Scaffold widgets on the same screen so you need to move the contents of your NavigationTabs scaffold to your Overview scaffold, something like this:

In Overview.dart replace your build method:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.cyan[700],
    appBar: AppBar(
      title: Text('Dashboard'),
    ),
    body: SingleChildScrollView(
      child: Container(
        child: new Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(5),
              child: new ListTile(
                title: new Text("Title"),
                subtitle: new Text("Sub"),
              ),
            ),
            _buildLevelCard(),
            Padding(
              padding: EdgeInsets.all(5),
              child: _buildCarousel(),
            ),
            _buildSearchCard(),
            _buildSearchCard(),
          ],
        ),
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.cyan[700],
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
    bottomNavigationBar: NavigationTabs(),
  );
}

In Navigation_tab.dart replace your build method:

@override
Widget build(BuildContext context) {
  return BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 4.0,
    child: new Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(
            Icons.home,
            color: Colors.cyan[700],
          ),
          onPressed: () {},
        ),
        new Container(
            padding: EdgeInsets.only(left: 20),
            child: IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.cyan[700],
              ),
              onPressed: () {},
            )),
        new Container(
            padding: EdgeInsets.only(left: 120),
            child: IconButton(
              icon: Icon(
                Icons.explore,
                color: Colors.cyan[700],
              ),
              onPressed: () {},
            )),
        new Container(
            height: 22.0,
            child: new RawMaterialButton(
              onPressed: () {},
              child: new Icon(
                Icons.person,
                color: Colors.white,
                size: 20.0,
              ),
              shape: new CircleBorder(),
              elevation: 1.0,
              fillColor: Colors.cyan[700],
            ))
      ],
    ),
  );
}