how to border radius to navigation bar flutter - 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:

Answer 2

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
late TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 4, vsync: this);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
bottomNavigationBar: DefaultTabController(
length: 4,
initialIndex: 0,
child: Container(
margin: const EdgeInsets.only(bottom: .5),
padding: const EdgeInsets.only(top: 3),
height: 50,
decoration: BoxDecoration(
// color: Theme.of(context).backgroundColor,
color: Colors.white,
border: Border.all(
color: Colors.grey[700]!,
width: 0.5,
),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(17),
topLeft: Radius.circular(17),
),
),
child: TabBar(
physics: const NeverScrollableScrollPhysics(),
isScrollable: false,
controller: _tabController,
indicatorWeight: 0,
// mouseCursor: MouseCursor.defer,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(
color: Colors.black,
width: 1,
),
// insets: EdgeInsets.symmetric(horizontal: 0),
),
tabs: [
kTabBarItemConstructor(
Icons.home,
'Home',
),
Container(
child: kTabBarItemConstructor(
Icons.home,
'Home',
),
),
Container(
child: kTabBarItemConstructor(
Icons.home,
'Profile',
),
),
// Tab(
// child: Container(
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
//
// Text(
// 'Корзина',
// style: TextStyle(
// fontSize: 9,
// color: Colors.grey[600],
// ),
// ),
// ],
// ),
// ),
// ),
kTabBarItemConstructor(
Icons.home,
'Profile',
),
],
),
),
),
));
}
}
Widget kTabBarItemConstructor(IconData icon, String text) {
return Tab(
child: Container(
height: 40,
width: 70,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
color: Colors.black.withOpacity(.65),
size: 25,
),
Container(
// margin: EdgeInsets.symmetric(horizontal: 10),
child: Text(
text,
style: TextStyle(
fontSize: 9,
color: Colors.grey[600],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
);
}
Run on DartPad.