how to border radius to navigation bar flutter

Question

I want circular borders on the top left and right in my navigation bar. below I have mentioned my bottom navigation bar code. how can I DO THAT? Appreciate your help on this. ............... ......................................... ..........................

import 'package:deltamax_health/Screens/welcome_screen.dart';
import 'package:flutter/material.dart';

import '../Constant/colors.dart';
import 'dashboard.dart';


class BottomNavigation extends StatefulWidget {
  const BottomNavigation({ Key? key }) : super(key: key);

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
int _selectedindex = 0;

  void _navigatePages(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

final List<Widget> _Pages = [const Dashboard() ,const WelcomeScreen()];

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: _Pages[_selectedindex],
       bottomNavigationBar: BottomNavigationBar(

         backgroundColor: Color.fromRGBO(115, 131, 163, 0.7490196078431373),

         fixedColor: backgroundBlue,
            currentIndex: _selectedindex,
            onTap: _navigatePages,
            type: BottomNavigationBarType.fixed,
            items: const [
              BottomNavigationBarItem(icon:Icon(
              Icons.account_balance_wallet_outlined,
              color: textblue,
              size: 30,
            ), label: ""),
              BottomNavigationBarItem(icon: Icon(
              Icons.open_in_browser_outlined,
              color: textblue,
              size: 30,
            ), label: ""),
              BottomNavigationBarItem(icon: Icon(
              Icons.money_outlined,
              color: textblue,
              size: 30,
            ), label: "")
            ]),

    );
  }
}

Answer 1

Wrapping with Container and providing borderRadius seens solve the issue, but there will splash effect on corners. In this can use clipBehavior on Container.

bottomNavigationBar: Container(
clipBehavior: Clip.hardEdge, //or better look(and cost) using Clip.antiAlias,
decoration: BoxDecoration(
  borderRadius: BorderRadius.only(
    topRight: Radius.circular(24),
    topLeft: Radius.circular(24),
  ),
),
child: BottomNavigationBar(

Or just use ClipRRect

body: _Pages[_selectedindex],
bottomNavigationBar: ClipRRect(
  borderRadius: const BorderRadius.only(
    topRight: Radius.circular(24),
    topLeft: Radius.circular(24),
  ),
  child: BottomNavigationBar(

---

Update 1

Use extendBody: true to extends the body to the bottom of the Scaffold. Or You can provide backgroundColor for simple case.

return Scaffold(
  // backgroundColor: Colors.blue, //same as body color
  extendBody: true,
  body: _Pages[_selectedindex],
  bottomNavigationBar: