How can i create this type of design in flutter?

Question

I have a list of items i want to filter with when a container is selected, when you select an item it should take you a different widget which also have a list of items.

I'll give a picture below for better clarifications.

I try looking for packages in pub.dev that can help me achieve this faster but can't find one.

I also tried achieving this with my customisations but i can't get it. :(

Pleas i'll need answers. Thank you!

Answer 1

I think this package will help you to achieve this: https://pub.dev/packages/buttons_tabbar

Answer 2

Use FilterChip Widget and ListView widget(Horizontal).

Answer 3

use ChoiceChip() I also assumed the data text in the choice chip came from a backend of some sort

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

Answer 4

You can simply like this

    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,
                  ),
            ),
          ),
        ),
      ),
    ), 
)

Output: