Flutter Custom Chips

Hello there, I am Md. Zobayer Hasan Nayem. Today I want to discuss a new thing and how to make custom chips with Flutter. Let’s go

Setp: 01
First of all, create a project that you want to use. when you use it, then write the code

Step: 02

Then you change your icons and image also, and enjoy the custom chips.

Center(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: List.generate(chipsData.length, (index) {
                        final isSelected = selectedChipIndex == index;
                        final chipData = chipsData[index];
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedChipIndex = isSelected ? -1 : index;
                            });
                          },
                          child: AnimatedContainer(
                            duration: Duration(milliseconds: 200),
                            padding: EdgeInsets.symmetric(
                              vertical: isSelected ? 4.0 : 6.0,
                              horizontal: isSelected ? 2.0 : 10.0,
                            ),
                            decoration: BoxDecoration(
                              color: isSelected
                                  ? AppColors.allPrimaryColor
                                  : Colors.white,
                              borderRadius: BorderRadius.circular(40.0),
                              border: Border.all(
                                color: isSelected
                                    ? AppColors.allPrimaryColor
                                    : Colors.white,
                                width: 2.0,
                              ),
                            ),
                            child: IntrinsicWidth(
                              child: Row(
                                children: [
                                  CircleAvatar(
                                    radius: isSelected ? 16.0 : 12.0,
                                    backgroundColor: isSelected
                                        ? AppColors.cFFFFFF
                                        : AppColors.cF0ECFA,
                                    child: SvgPicture.asset(
                                      chipData['icon'],
                                      color: isSelected
                                          ? AppColors.allPrimaryColor
                                          : AppColors.c000000,
                                      width: 20.0,
                                      height: 20.0,
                                    ),
                                  ),
                                  SizedBox(width: isSelected ? 12.0 : 8.0),
                                  Text(
                                    chipData['label'],
                                    style: TextFontStyle
                                        .textStyle12w500c333333StylePoppins
                                        .copyWith(
                                      color: isSelected
                                          ? Colors.white
                                          : Colors.black,
                                      fontWeight: FontWeight.w500,
                                      fontSize: isSelected ? 16.0 : 14.0,
                                    ),
                                  ),
                                  SizedBox(width: isSelected ? 6.0 : 4.0),
                                ],
                              ),
                            ),
                          ),
                        );
                      }),
                    ),
                  ),
                ),

Refference Image