Question 222354 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: how to set PersistentFooterButtons background?

Is there a way to set PersistentFooterButtons background 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

Tags:

2

Answers


  1. 0

    The PersistedFooterButtons shares backgroundColor with Scaffold. So if you change backgroundColor of Scaffold it will pick it up. And if you want your body to have different background color you can wrap it with Container or ColoredBox and give it some different color (like I did in the example below).

    class Sample extends StatelessWidget {
  const Sample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const ColoredBox(
        // if you want your body to have different background color
        color: Colors.grey,
        child: Center(
          child: Text('test'),
        ),
      ),
      // this changes persistentFooterButtons background color
      backgroundColor: Colors.white,
      persistentFooterButtons: [
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.arrow_back_ios_new),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.arrow_forward_ios_rounded),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Termina'),
        )
      ],
    );
  }
}

    Result:

    enter image description here

    Login or Signup to reply.
  2. 0

    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)).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search