Customize tab bar inside SliverPersistantHeader flutter

Question

I need a tab bar with the following effect:

Right now my code stands at:

              SliverPersistentHeader(
              pinned: true,
              delegate: SliverAppBarDelegate(
                TabBar(
                  isScrollable: true,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator: BoxDecoration(
                    gradient: LinearGradient(
                    colors: [Colors.white70, Colors.grey],
                  ),
                  borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  labelColor: CustomColors.primary,
                  unselectedLabelColor: CustomColors.secondary,
                  tabs: categories
                      .map((category) => Tab(
                            text: category,
                          ))
                      .toList(),
                  controller: _tabController,
                ),
              ),
            ),

And the delegate:

class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      height: 80,
      color: CustomColors.white,
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

The current tab bar "tabs" are on default height. How can I achieve the same as the picture?

N.B: The SliverAppBarDelegate is in a separate file. Is it possible to move the TabBar() to another file as well?

Answer 1

This maybe works for you

tabController.index get the current index of the tab then you can decide what behavior show in any case

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  List<String> categories = [
    'All',
    'Food',
    'Drink',
    'Clothes',
    'Electronics',
    'Others'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: DefaultTabController(
          length: categories.length,
          child: Builder(builder: (BuildContext context) {
            final TabController tabController =
                DefaultTabController.of(context)!;
            tabController.addListener(() {
              if (!tabController.indexIsChanging) {
                int index = tabController.index;
                setState(() {});
                // Your code goes here.
                // To get index of current tab use tabController.index
              }
            });
            return Scaffold(
              extendBodyBehindAppBar: true,
              appBar: AppBar(
                shape: const Border(
                  bottom: BorderSide(color: Colors.black12, width: 1),
                ),
                backgroundColor: Colors.transparent,
                elevation: 0,
                bottom: TabBar(
                  labelColor: Colors.white,
                  indicatorColor: Colors.transparent,
                  isScrollable: true,
                  padding: const EdgeInsets.all(3),
                  tabs: categories
                      .map(
                        (category) => Tab(
                          icon: Container(
                            width: MediaQuery.of(context).size.width * 0.3,
                            height: MediaQuery.of(context).size.height * 0.06,
                            decoration: tabController.index ==
                                    categories.indexOf(category)
                                ? BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(10),
                                    boxShadow: const [
                                      BoxShadow(
                                        color: Colors.black12,
                                        blurRadius: 10,
                                        // offset: Offset(3, 6),
                                      )
                                    ],
                                  )
                                : const BoxDecoration(),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const Icon(
                                  Icons.ac_unit,
                                  color: Colors.black54,
                                ),
                                Text(
                                  category,
                                  style: const TextStyle(
                                    color: Colors.black54,
                                    fontSize: 18,
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      )
                      .toList(),
                ),
              ),
              body: TabBarView(
                controller: tabController,
                children: const [
                  Center(child: Text('All')),
                  Center(child: Text('Food')),
                  Center(child: Text('Drink')),
                  Center(child: Text('Clothes')),
                  Center(child: Text('Electronics')),
                  Center(child: Text('Others')),
                ],
              ),
            );
          })),
    );
  }
}

looks like