How to validate a form that has cards to select from and the user should obligatorily select one of-CodePudding

I have a code whereby the genders of a pet is listed in two separate cards and when the user taps on one of them, it changes color to indicate that it has been selected and is saved in the database. However, the app is letting the user continue to the next page without choosing any one of the values. I want to do a validation whereby the user will have to choose one of the cards to be able to move forward. How can I do this please?

Here is my code:

Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  primary: false,
                  scrollDirection: Axis.vertical,
                  children: List.generate(petGenders.length, (index) {
                    return GestureDetector(
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(12.0)),
                            color:
                            selectedIndex == index ? primaryColor : null,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                petGenders[petKeys[index]],
                                SizedBox(
                                  height: 15.0,
                                ),
                                Text(
                                  petKeys[index],
                                  style: TextStyle(
                                      color: selectedIndex == index
                                          ? Colors.white
                                          : null,
                                      fontSize: 18.0,
                                      fontWeight: FontWeight.w600),
                                ),
                              ],
                            ),
                          ),
                        ),
                        onTap: () {
                          setState(() {
                            widget.pet.gender = petKeys[index];
                            selectedIndex = index;
                          });
                        });
                  }),
                ),
              ),

The model:

Map<String, Image> genders() => {
    "Male":
        Image(image: AssetImage('Assets/images/male.png'), width: 50),
    "Female":
        Image(image: AssetImage('Assets/images/female.png'), width: 50)
  };

CodePudding user response：

Take one variable

bool isGenderSelected = false;

Then change its value to true on tap of card like

onTap: () {
   setState(() {
      isGenderSelected = true;
      widget.pet.gender = petKeys[index];
      selectedIndex = index;
   });
});

Now check if it's true then only allow the user to go next page or show some message to the user

CodePudding user response：

Scenario like this, I prefer using nullable selectedValue. In this case, I will create nullable int to hold and switch between selection.

int? selectedIndex;

And using color will be like

color: selectedIndex==index? SelectedColor:null,

you can replace null with inactive color.

For validation part, do null check on selectedIndex .

if(selectedIndex!=null){.....}