Search code examples
flutterlayout

Flutter: how to set PersistentFooterButtons background?

Is there a way to set the background of persistentFooterButtons property, from a Scaffold widget, to fill all the space of the footer?

I tried to use a container and set its color property, but it only fills the background up to buttons height.

Default

enter image description here

Wrapped with container

enter image description here

Desired result

enter image description here

Solution

  • This is a default hard-coded padding.

    If you using the Flutter Inspector, you will see this:

    enter image description here

    If you go into the SDKs Scaffold.dart (Ctrl+ click on the Scaffold widget), you will see the value is hard coded:

    SafeArea(
            top: false,
            child: IntrinsicHeight(
              child: Container(
                alignment: widget.persistentFooterAlignment,
                // -> Default padding here
                padding: const EdgeInsets.all(8), 
                child: OverflowBar(
                  spacing: 8,
                  overflowAlignment: OverflowBarAlignment.end,
                  children: widget.persistentFooterButtons!,
                ),
              ),
            ),
          ),

    One alternative way to tackle this situation could be to create a new Scaffold widget in a separate file and copy the source code from Flutter's original Scaffold to your new class but with your desired modifications (meaning, change the padding to padding: EdgeInsets.all(0)).