I have problem with bottom appbar customizing

Question

I want to make this bottom appbar.

but what I made is the shape like this.

now when I try to give padding from left and right to make it look like the first image it gets wrong.you can see the picture after adding padding:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: const Icon(Icons.ac_unit_sharp,color: Colors.black,),
    onPressed: () {
     
    },
    
  ),
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.only(left:8.0,right: 8),
    child: BottomAppBar(
      shape: CircularNotchedRectangle(),
      color: Colors.red,
      child: Container(
        height: 60,
      ),
    ),
  ),
      body: Column(
        children: [
        ],
      ),
    );
  }
}

could you help me please?

Peter Koltai · Answer 1 · 2023-04-11T20:01:21.153

2

EDIT1: as per the comment of @YeasinSheikh please try the following to add padding to both the navigation bar itself and the FAB.

EDIT2: a new solution to solve the problems with the previous one.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        child: const Icon(
          Icons.ac_unit_sharp,
          color: Colors.black,
        ),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
          notchMargin: 8,
          shape: const CircularNotchedRectangle(),
          color: Colors.red,
          child: Column(mainAxisSize: MainAxisSize.min, children: [
            Row(children: [
              Container(
                  height: 60,
                  width: 8,
                  color: Theme.of(context).scaffoldBackgroundColor),
              Expanded(child: Container(height: 60)),
              Container(
                  height: 60,
                  width: 8,
                  color: Theme.of(context).scaffoldBackgroundColor),
            ]),
            Container(height: 8, width: double.infinity, color: Theme.of(context).scaffoldBackgroundColor),
          ])),
      body: Column(
        children: [],
      ),
    );
  }
}

edited Apr 11 '23 at 20:01

answered Apr 11 '23 at 17:19

Peter Koltai

8,296
2
10
20

actually it can be done with `notchMargin: ` but the OP is asking about outer padding of red(navBar) – Md. Yeasin Sheikh Apr 11 '23 at 17:26
@YeasinSheikh You are perfectly right, I will edit my answer, but with `notchMargin` it can be problematic because it expects a double value and in this case we need only a left padding. – Peter Koltai Apr 11 '23 at 17:40
we have `AutomaticNotchedShape` but meeting `host` and `guest` shape are breaking bezier for my case – Md. Yeasin Sheikh Apr 11 '23 at 17:43
@YeasinSheikh Please check my updated answer, it seems that adding twice as much left padding to the FAB as the left / right of `BottomAppBar` seems to work. – Peter Koltai Apr 11 '23 at 17:45
@YeasinSheikh Thank you, it seems that due `FloatingActionButtonLocation.centerDocked` the FAB will be placed at the very center so we need to add padding once for the `BottomAppBar` padding and once again for the FAB's padding. – Peter Koltai Apr 11 '23 at 17:56
just I realized there is a problem.the width of sides is not the same.I mean now the FAB is not in the center of screen and left side is wider than right side. – amirreza ghabeli Apr 11 '23 at 18:08
sir do you have any solutions for this? – amirreza ghabeli Apr 11 '23 at 18:28
@YeasinSheikh there is a problem here.the width of sides is not the same.I mean now the FAB is not in the center of screen and left side is wider than right side.do you have any idea? – amirreza ghabeli Apr 11 '23 at 18:35
Sorry, you are right, I am looking into this. – Peter Koltai Apr 11 '23 at 19:24
Please check the updated answer. It was a little complicated as I thought at the beginning. `Theme.of(context).scaffoldBackgroundColor` should match the background color of your scaffolds. Somewhy it is not working with padding. – Peter Koltai Apr 11 '23 at 20:02
if it fails, for absolute design, you might need to create custom class with ShapeBorder or like `AutomaticNotchedShape` – Md. Yeasin Sheikh Apr 11 '23 at 21:21

I have problem with bottom appbar customizing

1 Answers1