curve in bottom navbar (flutter)

Issue

 bottomNavigationBar: BottomAppBar(
      //shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.home),
                onPressed: () async{

                  Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(builder: (context) => FeedScreen()),
                          (route) => false);
                },
              ),
            ),
            Expanded(
              flex: 14,
              child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                 FocusScope.of(context).requestFocus(myFocusNode);
                },
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
              flex: 12,
              child: IconButton(
                icon: Icon(Icons.favorite),
                onPressed: () {
                  // Navigator.push(context,
                  //     MaterialPageRoute(builder: (context) => LikedFeed(widget.uid)));
                },
              ),
            ),
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.perm_identity),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => profilePage(widget.uid)));
                },
              ),
            ),
          ],
        ),
      ),
    ),

i want to achieve this curve in bottom navbar without Floating action
button.

right now its only working when i place FAB at centre of navbar, but i
don’t want FAB at all.

the above code displays my bottom navbar, which has 3 icons in it, i want to give a curve(as shown in the image) as an addon design.

Solution

Use ClipPathto cut off semi circle from the top of the rectangular container.
Consider this example:

import 'package:flutter/material.dart';

void main() => runApp(MyContainer());

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    
    path.lineTo(size.width, size.height);
    path.lineTo(size.width,0.0);
    path.lineTo(2*size.width/3, 0.0);
    var firstEnd = Offset(size.width / 2, size.height/2);
    path.arcToPoint(Offset(size.width/3, 0),radius:Radius.circular(1));
      
  path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child:ClipPath(
   clipper: CustomClipperImage(),
   child: Container(height:100,
                    width: 300,
                    color:Colors.red,)
 )

        ),
      ),
    );
  }
}

Answered By – Kashish Khullar

Answer Checked By – Timothy Miller (FlutterFixes Admin)