I'm pretty new to Flutter and need design advice for a custom appbar.
I want to achieve something like this:
I need this TabBar to be inside an AppBar and tried inserting it to the actions[] list.
Code for it:
actions: [
Row(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
height: 45,
width: 500,
child: TabBar(
labelColor: blue500,
tabs: _tab.tabs,
controller: _tab.tabController,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.secondaryContainer
),
)
),
],
)
]
Any ideas/suggestions would be welcome ;)
Thank you!
This is what I came up with:
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
@override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 7,
child: Scaffold(
appBar: AppBar(
title: const Text("TabBar"),
bottom: TabBar(
isScrollable: true,
indicatorWeight: 2,
indicatorColor: Colors.blue,
labelColor: Colors.black,
onTap: (index){
setState(() {
selectedIndex = index;
});
},
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 0 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Latest"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 1 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Business"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 2 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Sports"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 3 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Entertainment"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 4 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Science"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 5 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Health"),
),
),
Tab(
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: selectedIndex == 6 ? Colors.blue.shade100 : null,
borderRadius: BorderRadius.circular(10)
),
child: const Text("Technology"),
),
),
]
),
),
body: const TabBarView(
children: [
//add your pages here
Text(""),
Text(""),
Text(""),
Text(""),
Text(""),
Text(""),
Text(""),
],
),
),
);
}
}