Flutter design help custom tab bar

Question

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.

It looks like this now:

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!

Answer 1

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