Rounded Corners in CupertinoTabBar

Question

I am using CupertinoTabbar as BottomNavigationBar in my app, now I need to make topLeft and topRight corners to be rounded, but I couldn't find how to make it anywhere?

I tried to wrap it with ClipRRect or Container but it's not working

This is how my CupertinoTabbar code looks:

CupertinoTabScaffold(
    backgroundColor: Colors.transparent,
    tabBuilder: (context, index) {
      switch (index) {
        case 0:
          return CupertinoTabView(builder: (context) => const Menu1());
        case 1:
          return CupertinoTabView(builder: (context) => const Menu2());
        case 2:
          return CupertinoTabView(builder: (context) => const Menu3());
        case 3:
          return CupertinoTabView(builder: (context) => const Menu4());

        default:
          return CupertinoTabView(
            builder: (context) => const Scaffold(
              body: Center(
                child: Text("Error"),
              ),
            ),
          );
      }
    },

    // tabBar: InvisibleCupertinoTabBar(),
    tabBar: CupertinoTabBar(
      activeColor: const Color(0xff3B7BBF),
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          label: 'Menu 1',
          icon: Icon(Icons.search),
        ),
        BottomNavigationBarItem(
          label: 'Menu 2',
          icon: Icon(CupertinoIcons.cube_box_fill),
        ),
        BottomNavigationBarItem(
          label: 'Menu 3',
          icon: Icon(CommunityMaterialIcons.truck),
        ),
        BottomNavigationBarItem(
          label: 'Menu 4',
          icon: Icon(Icons.menu),
        ),
      ],
    ),
  );

Answer 1

The CupertinoTabScaffold.tabBar, by default, is strictly designed to match the native iOS behavior.

To override it:

1.Create a Custom CupertinoTabController

• CupertinoTabController is defined in the libraries 'package:flutter/src/cupertino/tab_scaffold.dart (via package:flutter/cupertino.dart)'

• Copy the code in package:flutter/src/cupertino/tab_scaffold.dart

• Paste to a new file in your project lib folder, in my case custom_tab_scaffold.dart

• Change only the import statements from:

  import 'package:flutter/foundation.dart';

  import 'package:flutter/widgets.dart';

  import 'bottom_tab_bar.dart';

  To:

  import 'package:flutter/cupertino.dart' hide CupertinoTabBar;

  import 'package:flutter/foundation.dart';

  import 'package:flutter/widgets.dart';

  import './custom_bottom_tab_bar.dart'; //this will replace 'bottom_tab_bar.dart' and will be the new custom CupertinoTabBar that will be created in the next step.

2.Create a Custom CupertinoTabBar

• CupertinoTabBar is defined in the libraries 'package:flutter/src/cupertino/bottom_tab_bar.dart (via package:flutter/cupertino.dart)'

• Copy the code in package:flutter/src/cupertino/bottom_tab_bar.dart

• Paste to a new file in your project lib folder, in my case custom_bottom_tab_bar.dart

• In the file, update the Widget result by wrapping the child row with a container that has border radius properties set as shown below:

child: Container(
  decoration: BoxDecoration(
    color: CupertinoDynamicColor.resolve(
      this.backgroundColor ??
          CupertinoTheme.of(context).barBackgroundColor,
      context,
    ),
    borderRadius: BorderRadius.only(
        topLeft: const Radius.circular(30.0),
        topRight: const Radius.circular(30.0)),
  ),
  padding: EdgeInsets.only(bottom: bottomPadding),
  child: Row(
    // Align bottom since we want the labels to be aligned.
    crossAxisAlignment: CrossAxisAlignment.end,
    children: _buildTabItems(context),
  ),
)

• Also update the background color attribute that exists to transparent.

final Color backgroundColor = Colors.transparent;

3.Update on your App class

I used your code as it is and only added the import statements below:

import './custom_bottom_tab_bar.dart';
import './custom_tab_scaffold.dart';
import 'package:flutter/cupertino.dart' hide CupertinoTabBar, CupertinoTabScaffold;