how to create bar under component?

Issue

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?

Solution

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"),
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – Yeasin Sheikh

Answer Checked By – Robin (FlutterFixes Admin)