new

  List<String> categories = [
    'All',
    'Food',
    'Drink',
    'Clothes',
    'Electronics',
    'Others'
  ];
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: CustomColors.white,
        body: DefaultTabController(
          length: categories.length,
          child: NestedScrollView(
            controller: _scrollController,
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              _tabController.addListener(() {
                if (!_tabController.indexIsChanging) {
                  int index = _tabController.index;
                  print('this is the index: $index');
                  setState(() {});
                  // Your code goes here.
                  // To get index of current tab use tabController.index
                }
              });
              return [
                MerchantSliverAppbar(merchant: widget.merchant!),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: SliverAppBarDelegate(
                    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: TextStyle(
                                        color: Colors.black54,
                                        fontSize: 18,
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          )
                          .toList(),
                      controller: _tabController,
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              children: [
                _buildProductFeed(),
                _buildProductFeed(),
                _buildProductFeed(),
                _buildProductFeed(),
                _buildProductFeed(),
                _buildProductFeed(),
              ],
            ),
          ),
        ),
        floatingActionButton: ChatButton(),
      ),
    );
  }