Rounded Corners in CupertinoTabBar

user_10969195 0
Viewed 765

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),
        ),
      ],
    ),
  );
flutter-layout flutter
1 Answers

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;
user_142399570
Related