Create custom radio input in Flutter

Radio type input is a type of input in which the user selects one out of many available options. Selecting gender in signup forms is a very common example of this. Generally, the user selects one out of male, female or others. It looks somewhat like shown in the below image.

Radio input

To be honest, I hate these simple old radio inputs. If I’m building a very fancy app in the fancy framework, Flutter, I want my gender input thing to look beautiful. Maybe something like this.

Wow 😍😍😍, how beautiful it is. Isn’t it? But I assure you, this is the last beautiful thing you are seeing in this blog. After this, you’ll only see ugly code snippets.

Let’s dive into technicalities now.

1. First of all, create a class for Gender. (PS: I love OOPs)

class Gender {
  String name;
  IconData icon;
  bool isSelected;

  Gender(this.name, this.icon, this.isSelected);
}

2. Now that we know what data does a Gender class have, we just need to arrange it into the UI, simple AF. Let’s see how a single option looks like in the UI.

And in the code,

class CustomRadio extends StatelessWidget {
  Gender _gender;

  CustomRadio(this._gender);

  @override
  Widget build(BuildContext context) {
    return Card(
        color: _gender.isSelected ? Color(0xFF3B4257) : Colors.white,
        child: Container(
          height: 80,
          width: 80,
          alignment: Alignment.center,
          margin: new EdgeInsets.all(5.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(
                _gender.icon,
                color: _gender.isSelected ? Colors.white : Colors.grey,
                size: 40,
              ),
              SizedBox(height: 10),
              Text(
                _gender.name,
                style: TextStyle(
                    color: _gender.isSelected ? Colors.white : Colors.grey),
              )
            ],
          ),
        ));
  }
}

We have created the UI of a single Gender, now what? Repeat the code for all 3? Nope! What if you want your app to exclusive for boys only? Or you want to specify the other genders, the LGBT group etc. So we’ll keep it dynamically configurable. We will use a ListView. Create a List of all the genders.

List<Gender> genders = new List<Gender>();
genders.add(new Gender("Male", MdiIcons.genderMale, false));
genders.add(new Gender("Female", MdiIcons.genderFemale, false));
genders.add(new Gender("Others", MdiIcons.genderTransgender, false));

You’ll need to import the Material Design Icons.

We’ll call the entire widget as GenderSelector. It has the above list in it. Every element of this list if passed to CustomRadio widget. By default isSelected of every element is false. Whenever a gender is selected, isSelected of every gender is made false and then made true only for the selected gender. Thus unselecting all the other options, except the tapped one.

class GenderSelector extends StatefulWidget {
  @override
  _GenderSelectorState createState() => _GenderSelectorState();
}

class _GenderSelectorState extends State<GenderSelector> {
  List<Gender> genders = new List<Gender>();

  @override
  void initState() {
    super.initState();
    genders.add(new Gender("Male", MdiIcons.genderMale, false));
    genders.add(new Gender("Female", MdiIcons.genderFemale, false));
    genders.add(new Gender("Others", MdiIcons.genderTransgender, false));
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: genders.length,
        itemBuilder: (context, index) {
          return InkWell(
            splashColor: Colors.pinkAccent,
            onTap: () {
              setState(() {
                genders.forEach((gender) => gender.isSelected = false);
                genders[index].isSelected = true;
              });
            },
            child: CustomRadio(genders[index]),
          );
        });
  }
}

Finally, the outcome!!! Enjoy.

https://www.twitter.com/FlutterComm