Age calculator in flutter

3 min readJun 18, 2019

In this post we will see a simple age calculator for Android and iOS.

We will need two external packages

flutter_cupertino_date_picker: ^0.8.0 //for datepicker in ios
intl: ^0.15.8 // for formatting of date

Then, Create a stateful class as AgeCalculator

Following is function which calculates age. It take birthdate and returns age in int.

calculateAge(DateTime birthDate) {
  DateTime currentDate = DateTime.now();
  int age = currentDate.year - birthDate.year;
  int month1 = currentDate.month;
  int month2 = birthDate.month;
  if (month2 > month1) {
    age--;
  } else if (month1 == month2) {
    int day1 = currentDate.day;
    int day2 = birthDate.day;
    if (day2 > day1) {
      age--;
    }
  }
  return age;
}

Following is function which is used to call show date picker. It checks if device is android or ios and according to that it show datepicker.

Note: Both platform have different native date picker.

selectDate(BuildContext context, DateTime initialDateTime,
      {DateTime lastDate}) async {
    Completer completer = Completer();
    String _selectedDateInString;
    if (Platform.isAndroid)
      showDatePicker(
              context: context,
              initialDate: initialDateTime,
              firstDate: DateTime(1970),
              lastDate: lastDate == null
                  ? DateTime(initialDateTime.year + 10)
                  : lastDate)
          .then((temp) {
        if (temp == null) return null;
        completer.complete(temp);
        setState(() {});
      });
    else
      DatePicker.showDatePicker(
        context,
        dateFormat: 'yyyy-mmm-dd',
        locale: 'en',
        onConfirm2: (temp, selectedIndex) {
          if (temp == null) return null;
          completer.complete(temp);

          setState(() {});
        },
      );
    return completer.future;
  }

** If you didn’t understood code then do comment. I will then explain full code.

Following is simple ui code with button and text to show birthdate and age.

String birthDate = "";
  int age = -1;
  TextStyle valueTextStyle=TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 20,
  );
  TextStyle textTextStyle=TextStyle(

    fontSize: 16,
  );
  TextStyle buttonTextStyle=TextStyle(
color: Colors.white,
    fontSize: 16,
  );@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Age Calculator"),
    ),
    body: Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(32),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          (age > -1)
              ? Column(
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.elliptical(12, 12)),
                          border: Border.all(color: Colors.grey)
                      ),
                      padding: EdgeInsets.all(16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("BirthDate: ",style: textTextStyle,),
                          Text("$birthDate",style: valueTextStyle,)
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    Container(
                      padding: EdgeInsets.all(16),

                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.elliptical
                            (12, 12)),
                        border: Border.all(color: Colors.grey)
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[Text("Age: ",style: textTextStyle,), Text("$age",style: valueTextStyle,)],
                      ),
                    )
                  ],
                )
              : Text("Press button to see age"),
          SizedBox(
            height: 32,
          ),
          RaisedButton(
            color: Colors.blue,
            splashColor: Colors.blue.shade300,
            onPressed: () async {
              DateTime birthDate = await selectDate(context, DateTime.now(),
                  lastDate: DateTime.now());
              final df = new DateFormat('dd-MMM-yyyy');
              this.birthDate = df.format(birthDate);
              this.age = calculateAge(birthDate);

              setState(() {});
            },
            child: Container(
                padding: EdgeInsets.all(16),
                child: Text("Select birthdate".toUpperCase(),style: buttonTextStyle,)),
          )
        ],
      ),
    ),
  );
}