BorderRadius on Flutter CupertinoTabBar

This article explains how you can set border radius onto the CupertinoTabBar.

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’;

custom_bottom_tab_bar.dart will replace ‘bottom_tab_bar.dart’ and it 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:

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

3. Update on your App class

Update your class with a basic CupertinoTabScaffold and CupertinoTabBar and add the import statements below:

Happy coding!