A hole in bottom nav bar with a fab inside it - flutter

Question

With flutter, how can I create a hole inside the bottom nav bar and put the fab inside it, something like the image below

I have tried wrapping the fab with padding, increase the top padding to move it down and increase the notch margin but the bottom nav bar did not look like I want.

FAb code:

Padding(
    padding: const EdgeInsets.only(top: 90),
    child: FloatingActionButton(...)
)

bottom nav bar code:

BottomAppBar(
    elevation: 0,
    color: Colors.transparent,
    shape: const CircularNotchedRectangle(),
    clipBehavior: Clip.antiAlias,
    notchMargin: 50.0,
    child: SizedBox(...)
)

Here is how I want it to look like

can you include your code-snippet that you've tried with `notch margin` — Md. Yeasin Sheikh, Jan 18 '22 at 10:10
I will prefer `Stack` or you can use customPaint/Path for this — Md. Yeasin Sheikh, Jan 18 '22 at 11:04
@YeasinSheikh I did try Stack but I don't think I implemented it right, can you explain more with code? — Rua'a, Jan 19 '22 at 07:26

score 0 · Accepted Answer · answered Jan 19 '22 at 10:23

I am using Stack to draw on UI. play with widget's size, position, and color.

Run on dartPad

bottomNavigationBar: LayoutBuilder(
  builder: (context, constraints) => SizedBox(
    width: constraints.maxWidth,
    height: kToolbarHeight,
    child: Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.white,
          ),
        ),

        /// middle fab
        Positioned(
          bottom: -20,
          top: -20,
          left: 0,
          right: 0,
          child: Container(
            height: kToolbarHeight * 1.5,
            width: kToolbarHeight * 1.5,
            decoration: BoxDecoration(
              color: Theme.of(context).scaffoldBackgroundColor,
              // Colors.deepPurple,

              shape: BoxShape.circle,
            ),
          ),
        ),

        Align(
          alignment: Alignment.center,
          child: Container(
            width: kToolbarHeight * .8,
            height: kToolbarHeight * .8,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: Colors.amber,
              shape: BoxShape.circle,
            ),
            child: const Text("A"),
          ),
        )
      ],
    ),
  ),
),

A hole in bottom nav bar with a fab inside it - flutter

1 Answers1