Can I have an idea for Tabber in Flutter? - flutter

Question

I have no idea How to make Tab bar like This in my flutter web
Can I have an idea or How call This pattern.
Example video:
https://youtu.be/A3ttwYljg_8

Answer 1

You just have to give body to TabBarView, rest will be taken care by flutter itself.
Sample Code : -
TabBarView(
children: <Widget>[
Tabbar 1 body ...., //1st index, 1st tab
Tabbar 2 body ...., //2nd index, 2nd tab
Tabbar 3 body ...., //...
Tabbar 4 body ...., //...
Tabbar 5 body .... //...
]
)
TabBarView
Complete Code : -
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatefulWidget {
const MyStatelessWidget({super.key});
#override
State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}
class _MyStatelessWidgetState extends State<MyStatelessWidget> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: 5,
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 107, 179, 234),
title: const Text('TabBar Widget'),
bottom: const TabBar(
labelColor: Colors.black,
indicator: BoxDecoration(color: Colors.yellow),
labelPadding: EdgeInsets.only(bottom: 5),
indicatorPadding:
EdgeInsets.only(left: 30, right: 30, bottom: 10, top: 5),
tabs: <Widget>[
SizedBox(
width: 70,
height: 40,
child: Center(
child: Tab(
text: "Tab 1",
),
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 2",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 3",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 4",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 5",
),
),
],
),
),
body: TabBarView(
children: <Widget>[
Column(
children: [
Expanded(
child: Container(
color: Colors.red,
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 9, 79, 135),
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 144, 255, 54),
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 109, 40, 36),
)),
Expanded(
child: Container(
color: Colors.yellow,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: Colors.green,
)),
Expanded(
child: Container(
color: Colors.yellow,
))
],
),
],
),
),
);
}
}
Output :-