Flutter - Round out corners tab bar

main.dart

// @author OMi Shah
// @email [email protected]
// @organization CodeCyan
// @website www.codecyan.com

import 'package:flutter/material.dart';

void main() {
  runApp(const CodeCyanApp());
}

class CodeCyanApp extends StatelessWidget {
  const CodeCyanApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int activeTabIndex = 0;
  int totalTabs = 5;

  static const bgColor = Colors.black;
  static const tabBgColor = Colors.orange;
  static const activeTabBgColor = Colors.white;
  static const tabCornerRadiusColor = bgColor;
  static const tabMinWidth = 90.0;
  static const tabRadius = 17.0;
  static const tabCornerRadius = 10.0;
  static const tabContentPadding = 12.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      bottomNavigationBar: roundOutCornersTabBar(),
      body: const Text("DEMO"),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget roundOutCornersTabBar() {
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children:
            List<Widget>.generate(totalTabs, (index) => buildSingleTab(index)));
  }

  Widget buildSingleTab(int index) {
    return Wrap(crossAxisAlignment: WrapCrossAlignment.end, children: [
      (index == 0
          ? Stack(children: [
              Container(
                decoration: BoxDecoration(
                    color: index == activeTabIndex
                        ? activeTabBgColor
                        : tabBgColor),
                child: Container(
                    decoration: const BoxDecoration(
                        color: tabCornerRadiusColor,
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(tabCornerRadius),
                        ))),
                width: 10,
                height: 10,
              )
            ])
          : Container()),
      InkWell(
          focusColor: Colors.transparent,
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
          onTap: () => setState(() {
                activeTabIndex = index;
              }),
          child: Stack(
              alignment: (index == activeTabIndex - 1
                  ? Alignment.bottomRight
                  : index == activeTabIndex + 1
                      ? Alignment.bottomLeft
                      : Alignment.bottomCenter),
              children: [
                (index == activeTabIndex - 1 || index == activeTabIndex + 1
                    ? Container(width: 15, height: 15, color: activeTabBgColor)
                    : Container()),
                Container(
                  constraints: const BoxConstraints(minWidth: tabMinWidth),
                  child: Text("Tab ${index + 1}", textAlign: TextAlign.center),
                  padding: const EdgeInsets.all(tabContentPadding),
                  decoration: BoxDecoration(
                      color:
                          index == activeTabIndex ? Colors.white : tabBgColor,
                      borderRadius: BorderRadius.only(
                          bottomLeft: (index == activeTabIndex + 1
                              ? const Radius.circular(tabRadius)
                              : const Radius.circular(0)),
                          bottomRight: (index != totalTabs - 1 &&
                                  index == activeTabIndex - 1
                              ? const Radius.circular(tabRadius)
                              : const Radius.circular(0)),
                          topLeft: const Radius.circular(tabRadius),
                          topRight: const Radius.circular(tabRadius))),
                ),
              ])),
      (index == totalTabs - 1
          ? Stack(children: [
              Container(
                decoration: BoxDecoration(
                    color: index == activeTabIndex
                        ? activeTabBgColor
                        : tabBgColor),
                child: Container(
                    decoration: const BoxDecoration(
                        color: tabCornerRadiusColor,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(tabCornerRadius),
                        ))),
                width: 10,
                height: 10,
              )
            ])
          : Container())
    ]);
  }
}