How to make Inside curve in container in Dart Flutter?

Question

I making this this application in which I have to make a bottom navigation bar like this which is curved inside of the container so is there any perticular solution for this it will be appreciated. Thanks

I making this this application in which I have to make a bottom navigation bar like this which is curved inside of the container so is there any perticular solution for this it will be appreciated. Thanks

Answer 1

try this solution

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: SizedBox(
        height: 50,
        width: 50,
      ),
      bottomNavigationBar: BottomAppBar(
        height: 50,
        shape: const CircularNotchedRectangle(),
        color: Colors.green,
        notchMargin: 5,
        padding: EdgeInsets.zero,
        elevation: 5,
        child: SizedBox(
          height: 50.0,
          child: Row(
            // direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                child: TextButton.icon(
                  label: Text(
                    "Home",
                  ),
                  icon: Icon(
                    Icons.home,
                  ),
                  onPressed: () {},
                ),
              ),
              const Expanded(
                child: SizedBox(),
              ),
              Expanded(
                child: TextButton.icon(
                  label: Text(
                    "Scan",
                  ),
                  icon: Icon(
                    Icons.qr_code,
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),

here is the result