Flutter - Round out corners Tab Bars - flutter

Question

I want to add this kind of tabBars in flutter.
Please suggest any way to achieve this using a library or code or any idea. That would be helpful.
Thanks for the help!

Answer 1

Not the perfect one also not even optimized. I will update in my free time. At the moment you can play with the code and make a change according to your requirement.
Live playground/demo: https://dartpad.dev/?id=610bea5fb086bf495550f99e9a9db839
Gist link: https://gist.github.com/omishah/610bea5fb086bf495550f99e9a9db839
Complete code:
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())
]);
}
}
Ps: Will optimise the code and fix any bugs in my free time. Thank you