how to create bar under component? - flutter

Question

I am developing a flutter app, I need to create a navigation bar like this
the problem is I don't know how to add that bar under categories (which changes to red when the component is selected).
any idea?

Answer 1

You can use TabBar and TabBarView.
you can change UI the way you like.
Demo result
demo Widget
class MyStatelessWidget extends StatefulWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
_MyStatelessWidgetState createState() => _MyStatelessWidgetState();
}
class _MyStatelessWidgetState extends State<MyStatelessWidget>
with SingleTickerProviderStateMixin {
final tabs = <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Text("second tab"),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
];
late final TabController controller;
#override
void initState() {
controller = TabController(length: tabs.length, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Scaffold(
appBar: AppBar(
title: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
suffixIcon: Icon(Icons.search),
),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Icon(Icons.more),
),
],
bottom: TabBar(controller: controller, tabs: tabs),
),
body: TabBarView(
controller: controller,
children: <Widget>[
Center(
child: Text("It's cloudy here"),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],
),
),
);
}
}