Question 75494 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make the first chip in the list selected by default?

I’m making a filter screen that uses Filter Chips, creating a list of filter chips. I want the first item to be selected as default. How to achieve this?

Code:

final items2 = ["Both", "Boy", "Girl", "Infant"];
List<String> gender = [];

Wrap(
                        spacing: 8,
                        runSpacing: 8,
                        children: items2
                            .map(
                              (e) => FilterChip(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  backgroundColor: Colors.white,
                                  selectedColor: const Color(0xff6fedf6),
                                  label: Container(
                                    height: 46,
                                    width: 50,
                                    alignment: Alignment.center,
                                    child: Text(e),
                                  ),
                                  labelStyle: GoogleFonts.poppins(
                                    textStyle: const TextStyle(
                                      color: Colors.black,
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                      letterSpacing: 0.5,
                                    ),
                                  ),
                                  selected: gender.contains(e),
                                  onSelected: (bool value) {
                                    if (gender.contains(e)) {
                                      gender.remove(e);
                                    } else {
                                      gender.add(e);
                                    }
                                    setState(() {});
                                  }),
                            )
                            .toList(),
                      ),
Tags:

2

Answers


  1. 0

    You could try like this

    List<Map<String, dynamic>> filterChips = [
   {'label': 'chip 1', 'isSelected': true},
   {'label': 'chip 2', 'isSelected': false},
   {'label': 'chip 3', 'isSelected': false},
   {'label': 'chip 4', 'isSelected': false},
];

    The implementation like this

    filterChips
                                .map(
                                  (chip) => FilterChip(
                                    labelPadding:
                                        const EdgeInsets.symmetric(
                                            horizontal: 15, vertical: 1),
                                    selectedColor:
                                        Theme.of(context).highlightColor,
                                    visualDensity: VisualDensity.compact,
                                    backgroundColor:
                                        const Color(0XFFE8EBF1),
                                    showCheckmark: false,
                                    disabledColor: Colors.amber,
                                    labelStyle: TextStyle(
                                        color: chip['isSelected']
                                            ? Colors.white
                                            : Colors.black,
                                        fontSize: 12,
                                        fontWeight: FontWeight.w600),
                                    label: Text(
                                      chip['label'],
                                    ),
                                    onSelected: ((isSelected) => setState(
                                          () {
                                            filterChips = filterChips
                                                .map((otherChip) {
                                              return chip == otherChip
                                                  ? {
                                                      'label':
                                                          chip['label'],
                                                      'isSelected': true
                                                    }
                                                  : {
                                                      'label': otherChip[
                                                          'label'],
                                                      'isSelected': false
                                                    };
                                            }).toList();
                                          },
                                        )),
                                    selected: chip['isSelected'],
                                  ),
                                )
                                .toList(),
    Login or Signup to reply.
  2. 0

    You just need to add the item on selected list

    final items2 = ["Both", "Boy", "Girl", "Infant"];
late List<String> gender = [items2 .first];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search