Simple Age Calculator App using Flutter

Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. In this article, we’ll build a simple Flutter app that calculates a person’s age based on their birthdate. To do this, we’ll need to take input from the user, perform the calculations, and display the result. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementations

Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Required Tools

To build this app, you need the following items installed on your machine:

1. Visual Studio Code (One of Flutter’s recommended IDEs).
2. Android Emulator / iOS Simulator / Original device.
3. Flutter Installed (I would recommend following this guide to install it if you don’t have it already)
4. Flutter plugin for VS Code (Recommended Guide).
5. Open Visual Studio Code from that directory.
6. Open the command palette by pressing CTRL + SHIFT + P and type Flutter. Choose Flutter: New Project from the listed options.
7. Select Application from the next list.

It’ll ask you to Select the target folder to create the project. By default, it’ll be in the same folder where you opened VS Code. Type your app name in the text input and hit Enter.

Here is the full code

Dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Age Calculator',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String myAge = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Age Calculator"),
        centerTitle: true,
        systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Theme.of(context).primaryColor),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Your age is',
              // style: Theme.of(context).textTheme.displayLarge,
              style: TextStyle(fontSize: 40),
            ),
            const SizedBox(
              height: 10,
            ),
            Text(myAge),
            const SizedBox(
              height: 30,
            ),
            ElevatedButton(
              onPressed: () => pickDob(context),
              child: const Text('Pick Your Date of Birth'),
            )
          ],
        ),
      ),
    );
  }

  pickDob(BuildContext context) {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1900),
      lastDate: DateTime.now(),
    ).then((pickedDate) {
      if (pickedDate != null) {
        calculateAge(pickedDate);
      }
    });
  }

  calculateAge(DateTime birth) {
    DateTime now = DateTime.now();
    Duration age = now.difference(birth);
    int years = age.inDays ~/ 365;
    int months = (age.inDays % 365) ~/ 30;
    int days = ((age.inDays % 365) % 30);
    setState(() {
      myAge = '$years years, $months months, and $days days';
    });
  }
}

When we have written this code we will click the run and start without debugging.

Output: