我认为这套方案将帮助您实现这一目标：https://pub.dev/packages/buttons_tabbar

使用FilterChip小部件和ListView小部件（水平）。

useChoiceChip()我还假设choice芯片中的数据文本来自某种后端

...
 var _value = 0;
  String chipCatId = "";
  bool isChipSelected = false;
...
 child:ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  shrinkWrap: true,
                                  itemCount:
                                      snapshot.data!.data!.children!.length,
                                  itemBuilder: (context, index) {
                                    return Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 2.0),
                                      child: ChoiceChip(
                                          backgroundColor:
                                              AppColors.dullThemeColor,
                                          label: Text(
                                            index == 0
                                                ? "All"
                                                : snapshot.data!.data!
                                                    .children![index - 1].name
                                                    .toString(),
                                            style: const TextStyle(
                                              color: AppColors.whiteThemeColor,
                                            ),
                                          ),
                                          selected: _value == index,
                                          pressElevation: 20,
                                          elevation: 2.0,
                                          selectedColor:
                                              AppColors.secondaryThemeColor,
                                          onSelected: (bool selected) {
                                            setState(() {
                                              chipCatId = snapshot.data!.data!
                                                  .children![index - 1].id
                                                  .toString();
                                              isChipSelected = selected;
                                              _value =
                                                  (selected ? index : null)!;
                                              _onRefresh();
                                            });
                                          }),
                                    );
                                  },
                                );

你可以简单地这样

List<String> all = ["All", "Message", "Jobs"];
        
    Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: List.generate(
      all.length,
      (index) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.5),
              borderRadius: const BorderRadius.all(
                  Radius.circular(20))),
          child: Padding(
            padding: const EdgeInsets.symmetric(
                horizontal: 12, vertical: 8),
            child: Text(
              all[index],
              style: Theme.of(context)
                  .textTheme
                  .subtitle2
                  ?.copyWith(
                    color: AppTheme.grey1,
                    fontWeight: FontWeight.normal,
                  ),
            ),
          ),
        ),
      ),
    ), 
)

输出：