Floating Action Button (FAB) notch margin does not show content of body on scroll

Hi,

The body of the scaffold does not extend to the bottom of the screen when using a notched Floating Action Button.

Below is the basic setup of a Scaffold, BottomAppBar and a notched FloatingActionButton that is center docked.

I turned the background of the body to purple to highlight the issue.

As per material guidelines, the content of the body should be visible behind the notch.

Is there a property that fixes this in the scaffold or does extra logic need to be added to extend height of the body when a notched FAB is present?

See scrolling at following link:
Material.io: App Bars Bottom

import 'package:flutter/material.dart';

void main() => runApp(new MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => new _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Test',
      home: new Scaffold(
        body: new Container(
          color: Colors.purple,
        ),
        bottomNavigationBar: new BottomAppBar(
          hasNotch: true,
          color: Colors.grey,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {},),
              IconButton(icon: Icon(Icons.search), onPressed: () {},),
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: null,
          child: new Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      ),
    );
  }
}

You are correct and thanks for the nice example.

This appears to be a problem with Scaffold's internal layout.

@HansMuller

While we can make this a flag (either put body above the BAB or over the entire scaffold), I believe there are use cases where you need both simultaneously, e.g you want to have things show behind the BAB but also to layout out other things just above the BAB.
An example app that does that is Google Camera where the camera preview and preview overlay (e.g focus ring) extend below the BAB, but some elements (e.g the burst chip) are laid out above the BAB.

On the other hand this adds another parameter to Scaffold which is already pretty complex.

@HansMuller @Hixie any thoughts?

I agree that, for the sake of flexibility, we should enable developers to provide a body that extends behind the BAB as well as above it.

Maybe should provide a Widget valued Scaffold.fullBody (extendedBody?) that extends all they way behind the app bar and likewise below the BAB. The fullBody widget would be stacked behind the body.

I hope that a solution can be found

Hi guys, does anyone know of a workaround to this issue currently?

Also, if I were to pull a bottom sheet only moves the fab, removing the notch (obviously) and giving a buggy effect.

I'm attaching two pictures that illustrate the problem.

And as it can be seen in the pictures above, the appbar is drawn on top of the bottom sheet.

class _HomeState extends State<HomePage> {
  final _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Scaffold(
        key: _scaffoldKey,
        bottomNavigationBar: new BottomAppBar(
          hasNotch: true,
          color: Colors.red,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                color: Colors.white,
                onPressed: () {
                  _scaffoldKey.currentState
                      .showBottomSheet((context) => Container(
                            color: Colors.red,
                            height: 250.0,
                      child: Container()
                          ));
                },
              ),
            ],
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          backgroundColor: Colors.red,
          foregroundColor: Colors.white,
          onPressed: () {
          },
        ),
      ),
    );
  }
}```

@GuyMS

@GuyMS , in a related issue (#17088), RyanAfrish7 wants to put the body behind transparent Appbar. He suggested the following workaround:

Remove the appBar from the appBar slot of the Scaffold. Add the appBar into a Stack within the Scaffold's body. Add another Container to fill the screen to the Stack. Add all the components into that Container. That's it. You may now add background blur to the appBar and it works like a charm.

It will require more customisations for my case, but for you it looks like it should workaround your problem.

Any actual solution to this issue yet? I've stumbled on the same issue with the latest version.
From flutter doctor:
Flutter (Channel beta, v0.8.2, on Mac OS X 10.13.6 17G65, locale en-IN)

Having the same issue

Well done, guys.

Do you have the same issues? Or do you use IconButton and only the icon is clickable?

You can make a custom clipper and cut the InkWell, but you'll need to make sure it has to follow the same notch patch.

@RuiffCardoso

@RuiffCardoso I'm only using a Row + two IconButtons for the BottomAppBar's content, and my notchMargin is intact. Although this worked for a few reloads, after a full restart it started returning an error regarding _BottomAppBarClipper, so I had to revert to using Scaffold's bottomNavigationBar.

I agree that, for the sake of flexibility, we should enable developers to provide a body that extends behind the BAB as well as above it.

Maybe should provide a Widget valued Scaffold.fullBody (extendedBody?) that extends all they way behind the app bar and likewise below the BAB. The fullBody widget would be stacked behind the body.

#25654 I did something like that

Any update on this?

@shinayser

@shinayser - working with @IKatsuba on a solution (finally). Sorry that it's taken SO long.

My solution:
it's worked.

Widget build(BuildContext context) {
    return new Stack(
        children: <Widget>[
         new Container(
            color: Colors.red.shade500,
            child: // Your Content
          ),
          new Positioned(
            child: new Container(
              margin:
                  EdgeInsets.only(top: MediaQuery.of(context).size.height - 55),
              child: new Scaffold(
                  backgroundColor: Colors.transparent,
                  floatingActionButtonLocation:
                      FloatingActionButtonLocation.centerDocked,
                  floatingActionButton: new FloatingActionButton(
                    onPressed: () => {},
                    elevation: 2,
                    foregroundColor: Colors.white,
                    child: Icon(Icons.add),
                  ),
                  bottomNavigationBar: new BottomAppBar(
                    shape: CircularNotchedRectangle(),
                    notchMargin: 4.0,
                    child: new Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Mdi.home_outline),
                          onPressed: () => {},
                        ),
                        IconButton(
                          icon: Icon(Mdi.account_outline),
                          onPressed: () => {},
                        ),
                      ],
                    ),
                )
            ),
          )
        ],
      );
  }

Hey @HoangKimDuc it is a nice workaround! But I believe the framework should support it directly without the need of a workaround.
Anyone has any idea if this will be implemented soon ?

@shinayser

@shinayser look here #25654

Implemented with Scaffold(extendBody: true). See also: #27973

Fixed in #25654 which was updated and landed as #27973

Regression in [√] Flutter (Channel master, 1.19.0-1.0.pre.26, on Microsoft Windows [Version 10.0.18362.778], locale en-150)

when Scaffold's extendBody is set to true

Regression in [√] Flutter (Channel master, 1.19.0-1.0.pre.26, on Microsoft Windows [Version 10.0.18362.778], locale en-150)

when Scaffold's extendBody is set to true

You should open a new issue.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Floating Action Button (FAB) notch margin does not show content of body on scroll #17555

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Floating Action Button (FAB) notch margin does not show content of body on scroll #17555

Description

Activity

HansMuller commented on May 14, 2018

amirh commented on Jun 6, 2018

HansMuller commented on Jun 6, 2018

nitneuq33000 commented on Jul 7, 2018

Zaxist commented on Aug 2, 2018

mrmitew commented on Aug 8, 2018

mrmitew commented on Aug 9, 2018

ishaanbahal commented on Oct 1, 2018

RuiffCardoso commented on Dec 13, 2018

3 remaining items

mrmitew commented on Dec 18, 2018

gildaswise commented on Dec 18, 2018

IKatsuba commented on Dec 21, 2018

shinayser commented on Jan 10, 2019

HansMuller commented on Jan 18, 2019

James-D-Dev commented on Jan 30, 2019

shinayser commented on Jan 30, 2019

IKatsuba commented on Jan 30, 2019

creativecreatorormaybenot commented on Feb 21, 2019

HansMuller commented on Feb 25, 2019

radeksvarz commented on May 12, 2020

Zazo032 commented on May 12, 2020

github-actions commented on Aug 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions