The CircularNotchedRectangle() is not working properly. there is no cutout in the bottom app bar why this is happening, why bottom app bar taking default padding? is it supposed to have no padding(I used zero padding)?
the Image:
The CircularNotchedRectangle() shows this white shape at the bottom of the screen. if I increase notchMargin: 0.0-> notchMargin: 100.0 the white shape gets closer to the bottom bar if I increase it more, then the shape disappears (hides behind the bottom app bar).
The Code::
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: Stack( children: [ Positioned( bottom: 20, right: screenWidth/2.85, child: Container( height: screenHeight*0.15, width: screenWidth*0.3, child: FloatingActionButton.large( onPressed: (){}, tooltip: 'Start Engine', backgroundColor: Colors.transparent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50), ), child: Image.asset('Assets/Images/Start Engine.png', width: screenWidth*0.28, height: screenWidth*0.28, fit: BoxFit.cover, ), elevation: 0.0, ), ), ), ], ), bottomNavigationBar: BottomAppBar( elevation: 5, height: screenHeight * 0.08, padding: EdgeInsets.all(0), notchMargin: 0.0, shape: CircularNotchedRectangle(), child: ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(5), topRight: Radius.circular(5), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( width: screenWidth / 3, decoration: BoxDecoration( color: const Color.fromRGBO(25, 192, 122, 1), border: Border( left: BorderSide( color: Colors.black, width: 1.0, ), )), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( height: screenHeight * 0.025, width: screenWidth * 0.04, child: IconButton( icon: const Icon( Icons.home, size: 20, color: Colors.white, ), padding: EdgeInsets.zero, onPressed: () { *//*Navigator.push(context, MaterialPageRoute(builder: (context) => ));*//* }, ), ), SizedBox( height: 10, ), Text('Home', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12, fontFamily: 'default', ), ), ], ), ), Container( decoration: BoxDecoration( color: const Color.fromRGBO(25, 192, 122, 1), border: Border( left: BorderSide( color: Colors.black, width: 1.0, ), ), ), width: screenWidth / 3, height: screenHeight * 0.9, child: Stack( children: [ Positioned( bottom: screenHeight * 0.01, left: 0, right: 0, child: Text('Start Engine', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12, fontFamily: 'default', ), ), ), ], ), ), Container( decoration: BoxDecoration( color: const Color.fromRGBO(25, 192, 122, 1), border: Border( left: BorderSide( color: Colors.black, width: 1.0, ), )), width: screenWidth / 3, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( height: screenHeight * 0.025, width: screenWidth * 0.04, child: IconButton( icon: const Icon( Icons.info, size: 20, color: Colors.white, ), padding: EdgeInsets.zero, onPressed: () { *//*Navigator.push(context, MaterialPageRoute(builder: (context) => ));*//* }, ), ), SizedBox( height: 10, ), Text('Information', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12, fontFamily: 'default', ), ), ], ), ), ], ), ), ),