How to make custom tabbar with gradient - flutter

Question

How to make tab bar like below image in flutter?Is it possible to develop a Tabbar like below ?If not possible then what is the next better working solution?
Thank you for the support and i solved this issue my self without using any answers from stackoverflow

Answer 1

Try this way
I have created tab layout using ScrollablePositionedList
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widgets/flutter_widgets.dart';
void main() => runApp(HomeScreen());
int currentTab = 0;
class HomeScreen extends StatefulWidget {
#override
_HomeScreenPage createState() => _HomeScreenPage();
}
class TabModel {
String text;
TabModel({this.text});
}
List<TabModel> _tabList = [
TabModel(text: "Android"),
TabModel(text: "IOS"),
TabModel(text: "Java"),
TabModel(text: "JavaScript"),
TabModel(text: "PHP"),
TabModel(text: "HTML"),
TabModel(text: "C++"),
];
class _HomeScreenPage extends State<HomeScreen>
with SingleTickerProviderStateMixin {
PageController _controller = PageController(initialPage: 0, keepPage: false);
final ItemScrollController itemScrollController = ItemScrollController();
final ItemPositionsListener itemPositionListener =
ItemPositionsListener.create();
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
brightness: Brightness.light,
accentColor: Colors.red),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
appBar: AppBar(
title: Text("Custom TabBar"),
),
body: Column(
children: <Widget>[
Container(
height: 60,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14.0),
border: Border.all(color: Colors.black, width: 1.0)),
child: ScrollablePositionedList.builder(
scrollDirection: Axis.horizontal,
itemCount: _tabList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
gradient: currentTab == index
? LinearGradient(
colors: [
Colors.redAccent,
Colors.redAccent[200],
Colors.redAccent[100]
],
)
: null,
borderRadius: BorderRadius.circular(13.0),
),
child: FlatButton(
color: Colors.transparent,
onPressed: () {
setState(() {
currentTab = index;
_controller.jumpToPage(currentTab);
});
},
child: Text(
_tabList[index].text,
),
),
);
},
itemScrollController: itemScrollController,
itemPositionsListener: itemPositionListener,
)),
Flexible(
child: Container(
child: PageView(
controller: _controller,
onPageChanged: (pageId) {
setState(() {
currentTab = pageId;
itemScrollController.scrollTo(
index: currentTab, duration: Duration(seconds: 1));
});
},
children: <Widget>[
Container(
color: Colors.pink,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.cyan,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.red,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.green,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.grey,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.purple,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
Container(
color: Colors.teal,
child: Center(
child: Text(
_tabList[currentTab].text,
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.bold),
),
),
),
],
),
)),
],
)));
}
}
You can find source code for this demo from my github account
OUTPUT

Answer 2

import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(home: MainScreen()),
);
class MainScreen extends StatefulWidget {
_MainState createState() => _MainState();
}
class _MainState extends State<MainScreen> {
int viewChoice = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Toolbar Title',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold /*fontSize,etc*/),
),
actions: [
IconButton(
icon: Icon(Icons.account_circle),
onPressed: () {
//Todo when pressed
}),
]),
body: Container(
child: Column(mainAxisSize: MainAxisSize.min, children: [
SizedBox(
height: 200,
width: double.infinity,
child: Stack(children: [
Container(
padding: EdgeInsets.all(10.0),
alignment: Alignment.centerLeft,
color: Colors.yellow,
height: 100.0,
width: double.infinity,
child: Text('Tem',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20.0)), //Tem is in your ex pic
),
Positioned(
top: 75.0,
left: 40.0,
right: 40.0,
child: Container(
margin: EdgeInsets.only(left: 25.0, right: 25.0),
alignment: Alignment.topCenter,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14.0),
border: Border.all(color: Colors.black, width: 1.0)),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: Container(
decoration: BoxDecoration(
gradient: viewChoice == 0
? LinearGradient(
colors: [Colors.orange, Colors.orangeAccent],
)
: null,
borderRadius: BorderRadius.circular(13.0),
border: viewChoice == 0
? Border.all(color: Colors.black, width: 1.0)
: null,
),
child: FlatButton(
color: Colors.transparent,
onPressed: () {
setState(() {
viewChoice = 0;
});
},
child: Text(
'All',
/*style as your requirement*/
),
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
gradient: viewChoice == 1
? LinearGradient(
colors: [Colors.orange, Colors.orangeAccent],
)
: null,
borderRadius: BorderRadius.circular(13.0),
border: viewChoice == 1
? Border.all(color: Colors.black, width: 1.0)
: null,
),
child: FlatButton(
onPressed: () {
setState(() {
viewChoice = 1;
});
},
child: Text(
'Favorites',
/*style as your requirement*/
),
),
),
),
]),
),
),
]),
),
viewChoice == 0
? ListView(shrinkWrap: true, children: [
//Content of All categories
])
: ListView(shrinkWrap: true, children: [
//Content of All categories
])
]),
),
);
}
}

Answer 3

TabBar without AppBar
Give a try to below code.
import 'package:flutter/material.dart';
import 'package:flutter_text_to_image/utils/app_colors.dart';
class TabBarWidget extends StatefulWidget {
final String firstTabTxt;
final String firstTabViewTxt;
final String secondTabTxt;
final String secondTabViewTxt;
const TabBarWidget({
super.key,
required this.firstTabTxt,
required this.secondTabTxt,
required this.firstTabViewTxt,
required this.secondTabViewTxt,
});
#override
State
<TabBarWidget>
createState() => _TabBarWidgetState();
}
class _TabBarWidgetState extends State
<TabBarWidget>
with SingleTickerProviderStateMixin {
TabController? _tabController;
#override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Column(
children: [
Container(
height: 35,
decoration: BoxDecoration(
border: Border.all(
color: AppColors.tabBorderColor,
),
borderRadius: BorderRadius.circular(
5.0,
),
),
child: TabBar(
controller: _tabController,
indicator: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColors.waterMelonColor,
AppColors.mangoColor,
AppColors.azureColor,
AppColors.sapphireColor,
],
begin: FractionalOffset(0.0, 0.0),
end: FractionalOffset(1.0, 0.0),
stops: [
0.1,
0.4,
0.6,
1.0,
],
tileMode: TileMode.clamp,
),
borderRadius: BorderRadius.circular(
2.0,
),
),
labelColor: AppColors.whiteColor,
unselectedLabelColor: AppColors.blackColor,
tabs: [
Tab(
text: widget.firstTabTxt,
),
Tab(
text: widget.secondTabTxt,
),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Padding(
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
Text(
widget.firstTabViewTxt,
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
Text(
widget.secondTabViewTxt,
),
],
),
),
],
),
),
],
),
);
}
}