Age Calculator in Flutter
Tags: flutter
Published: 2023-02-26 01:32:47

In this post I will share about Age Calculator in Flutter, this Calculator finds the Age in years, months, days, hours.

Let's get Started...

## Overview

   

>  Get the Birth day of user by using datepicker, then find the difference between birthday and current day.
```
void _showPicker() {
    showDatePicker(
        context: context,
        firstDate:  DateTime(1900),
        initialDate:  DateTime(2023),
        lastDate: DateTime.now()).then((DateTime? dt) {
      selectedYear = dt?.year;
      selectedDay = dt?.day;
      selectedMon = dt?.month;
      calculateAge();
    });
  }
```
this function is used to get the birthdate of user

```
age = (2023 - selectedYear).toDouble();
```
this line is used to find the age in years.

```
DateTime date1 = DateTime(selectedYear, selectedMon, selectedDay);
      day = double.parse(date2.difference(date1).inDays.toString());
      month =  double.parse((date2.difference(date1).inDays / 30).floor().toString());
      hours = day*24.0;
```
this line is used to find the age in months, days, hours, And these calculations are approximate values.

```
 @override
  void initState() {
    animationController =  AnimationController(
        vsync: this, duration:  Duration(milliseconds: 1500));
    animation = animationController;
    animation1 = animationController;
    animation2 = animationController;
    animation3 = animationController;
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
```
And I use some Animations to visualize the results.

```
 animation =  Tween<double>(begin: animation.value, end: age).animate(
           CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation1 = Tween<double>(begin: animation.value, end: month).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation2 = Tween<double>(begin: animation.value, end: day).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation3 = Tween<double>(begin: animation.value, end: hours).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animationController.forward(from: 0.0);
```
These lines are used to show the result in animated view.

```
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        title:  Text("Age Calculator"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             OutlinedButton(
              onPressed: _showPicker,
              child:  Text(selectedYear != null
                  ? selectedYear.toString()
                  : "Select your year of birth"),
            ),
             const Padding(
              padding: EdgeInsets.all(20.0),
            ),
             AnimatedBuilder(
              animation: animation,
              builder: (context, child) => Text(
                "Your Age in years ${animation.value.toStringAsFixed(0)}"
                    "\nYour Age in months ${animation1.value.toStringAsFixed(0)}"
                    "\nYour Age in days ${animation2.value.toStringAsFixed(0)}"
                    "\nYour Age in hours ${animation3.value.toStringAsFixed(0)}",
                style:  const TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic),
              ),
            )
          ],
        ),
      ),
    );
  }

```

This was the build method for our project.

And the following is the entire code for `main.dart` file

```

import 'package:flutter/material.dart';
import 'package:age_calculator/age_calculator.dart';

void main() => runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme:  ThemeData(primarySwatch: Colors.grey),
    home:  MyHomePage()));

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  double age = 0.0;
  double month = 0.0;
  double day = 0.0;
  double hours = 0.0;
  final date2 = DateTime.now();
  var selectedYear ; // for setting year
  var selectedDay ; // for setting date
  var selectedMon ; // for setting month
  late Animation animation; // this denoting age animation
  late Animation animation1; // this denoting month animation
  late Animation animation2; // this denoting date animation
  late Animation animation3; // this denoting hour animation
  late AnimationController animationController;

  @override
  void initState() {
    animationController =  AnimationController(
        vsync: this, duration:  Duration(milliseconds: 1500));
    animation = animationController;
    animation1 = animationController;
    animation2 = animationController;
    animation3 = animationController;
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  void _showPicker() {
    showDatePicker(
        context: context,
        firstDate:  DateTime(1900),
        initialDate:  DateTime(2023),
        lastDate: DateTime.now()).then((DateTime? dt) {
      selectedYear = dt?.year;
      selectedDay = dt?.day;
      selectedMon = dt?.month;
      calculateAge();
    });
  }

  void calculateAge() {
    setState(() {
      age = (2023 - selectedYear).toDouble();
      DateTime date1 = DateTime(selectedYear, selectedMon, selectedDay);
      day = double.parse(date2.difference(date1).inDays.toString());
      month =  double.parse((date2.difference(date1).inDays / 30).floor().toString());
      hours = day*24.0;

      animation =  Tween<double>(begin: animation.value, end: age).animate(
           CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation1 = Tween<double>(begin: animation.value, end: month).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation2 = Tween<double>(begin: animation.value, end: day).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animation3 = Tween<double>(begin: animation.value, end: hours).animate(
          CurvedAnimation(
              curve: Curves.fastOutSlowIn, parent: animationController));
      animationController.forward(from: 0.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        title:  Text("Age Calculator"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             OutlinedButton(
              onPressed: _showPicker,
              child:  Text(selectedYear != null
                  ? selectedYear.toString()
                  : "Select your year of birth"),
            ),
             const Padding(
              padding: EdgeInsets.all(20.0),
            ),
             AnimatedBuilder(
              animation: animation,
              builder: (context, child) => Text(
                "Your Age in years ${animation.value.toStringAsFixed(0)}"
                    "\nYour Age in months ${animation1.value.toStringAsFixed(0)}"
                    "\nYour Age in days ${animation2.value.toStringAsFixed(0)}"
                    "\nYour Age in hours ${animation3.value.toStringAsFixed(0)}",
                style:  const TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic),
              ),
            )
          ],
        ),
      ),
    );
  }
}
```

Here i use one external package called `Age_Calculator`.

```
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  age_calculator: ^1.0.0  # include here
```
So you need to insert that in your `pubspec.yaml` file.

---

This was the final result.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k2m61ygyd6azagppbsy.png)
You can also check this by [here](https://arun.engineer/Age_Calculator/).

If you Like this, then put Likes and If you have any Queries then Comment your queries.

Thank you