How to remove top border of persistentFooterButtons in flutter

Viewed 1338

I'm using persistentFooterButtons and i wanna remove the top border of its. Anyone knows how ?

My code:

 persistentFooterButtons: [
        Center(
          child: TextButton(
            style: ButtonStyle(
              
            ),
              onPressed: () {
                print("press the filter btn");
              },
              child: Text("Filter")),
        )
      ],

enter image description here

2 Answers

You could do something like this:

Theme(
  data: ThemeData().copyWith(
    dividerColor: Colors.transparent,
  ),
  child: Scaffold(
    body: Text("Body"),
    persistentFooterButtons: [
      Center(
        child: TextButton(
          style: ButtonStyle(),
          onPressed: () {
            print("press the filter btn");
          },
          child: Text("Filter"),
        ),
      ),
    ],
  ),
);

dividerColor: Colors.transparent, sets the divider / top border to transparent

It's because the Border is actually hard-coded for this scenario. Looking at the source code of Scaffold, we can see how it's implemented:

if (widget.persistentFooterButtons != null) {
  _addIfNonNull(
    children,
    Container(
      /// Here is the non-conditional [Border] being set for the top side
      decoration: BoxDecoration(
        border: Border(
          top: Divider.createBorderSide(context, width: 1.0),
        ),
      ),
      child: SafeArea(
        top: false,
        child: ButtonBar(
          children: widget.persistentFooterButtons!,
        ),
      ),
    ),
    ...

But as you can see, the implementation of these buttons is pretty straight forward. As an easy fix, you can wrap the content of your Scaffold with a Stack and use the same implementation to achieve the same more customised (first step without the Border)

Something like this (might have to be adjusted to work as you want it to):

Scaffold(
  body: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      /// Your usual body part of the [Scaffold]
      ...
      /// Now here your own version of the bottom buttons just as the original implementation in [Scaffold]
      SafeArea(
        top: false,
        child: ButtonBar(
          children: [
            /// Place buttons or whatever you want here
            ...
          ],
        ),
      ),
      
    ],
  ),
);
Related