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: "")
            ]),

    );
  }
}

CodePudding user response：

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.

CodePudding user response：

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(