BuildandTeach (Henry Palma)

Simple App: Age Checker App

Create the Project

If you don’t have a project set up yet:

  1. Open your terminal or command prompt.
  2. Create a new Flutter project: flutter create age_checker_app
  3. Navigate to the project folder: cd age_checker_app

Features

  • Input your age.
  • Determine whether the user is a minor or an adult using if-else.

Concepts Used

  • Variables
  • Control Flow
  • Functions

Implementation

  • UI: TextField for user input and a button to check the age.
  • Logic: Use if-else to determine the age category.

Final Result
How the App Works

  1. Input Age:
    • The user enters their age into the TextField.
  2. Check Age:
    • The user presses the “Check Age” button.
    • The checkAge function runs, processes the input, and updates _result with the appropriate message.
  3. Display Output:
    • The _result message (e.g., “You are an adult.”) is displayed below the button.

Code

import 'package:flutter/material.dart';

void main() {
  runApp(AgeCheckerApp()); // Entry point of the app
}

class AgeCheckerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AgeCheckerScreen(),
    );
  }
}

class AgeCheckerScreen extends StatefulWidget {
  @override
  _AgeCheckerScreenState createState() => _AgeCheckerScreenState();
}

class _AgeCheckerScreenState extends State<AgeCheckerScreen> {
  final TextEditingController _controller = TextEditingController();
  String _result = '';

  void checkAge() {
    final age = int.tryParse(_controller.text);
    if (age == null) {
      setState(() {
        _result = 'Please enter a valid age.';
      });
      return;
    }

    if (age >= 18) {
      setState(() {
        _result = 'You are an adult.';
      });
    } else {
      setState(() {
        _result = 'You are a minor.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Age Checker')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: 'Enter your age'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: checkAge,
              child: Text('Check Age'),
            ),
            SizedBox(height: 20),
            Text(_result, style: TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

Code Explanation

1. main() Function

void main() {
  runApp(AgeCheckerApp()); // Entry point of the app
}
  • Purpose: The main() function is the starting point of any Dart/Flutter application.
  • runApp(AgeCheckerApp()): Launches the Flutter app and sets AgeCheckerApp as the root widget.

2. AgeCheckerApp Class

class AgeCheckerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Hides the debug banner
      home: AgeCheckerScreen(), // Sets the home screen
    );
  }
}
  • AgeCheckerApp:
    • Extends StatelessWidget, meaning it does not manage any internal state.
    • Sets up a MaterialApp with AgeCheckerScreen as the home screen.
  • MaterialApp:
    • Wraps the entire app in a Material Design framework.
    • Disables the debug banner using debugShowCheckedModeBanner: false.

3. AgeCheckerScreen Class

class AgeCheckerScreen extends StatefulWidget {
  @override
  _AgeCheckerScreenState createState() => _AgeCheckerScreenState();
}
  • StatefulWidget:
    • Used because the app’s output changes based on user input (age).
  • _AgeCheckerScreenState:
    • Contains the mutable state and the logic to handle user input and output.

4. UI and Input Handling

Text Input Field
final TextEditingController _controller = TextEditingController();
  • Purpose: _controller allows us to access and manage the text entered in the input field.
TextField(
  controller: _controller, // Links the input to the controller
  keyboardType: TextInputType.number, // Sets the keyboard to numeric
  decoration: InputDecoration(labelText: 'Enter your age'), // Placeholder text
)
  • TextField: A widget that accepts user input.
  • controller: Connects the TextField to the _controller for retrieving the input.
  • keyboardType: Ensures the keyboard is numeric for age input.
  • InputDecoration: Adds a placeholder label inside the input field.
Button to Check Age
ElevatedButton(
  onPressed: checkAge, // Calls the `checkAge` method when pressed
  child: Text('Check Age'), // Button text
)
  • ElevatedButton: A Material Design button.
  • onPressed: Specifies the function to execute when the button is pressed (checkAge in this case).
  • child: The widget displayed inside the button.

5. Age Checking Logic

void checkAge() {
  final age = int.tryParse(_controller.text); // Converts input to integer
  if (age == null) {
    setState(() {
      _result = 'Please enter a valid age.'; // Handles invalid input
    });
    return;
  }

  if (age >= 18) {
    setState(() {
      _result = 'You are an adult.';
    });
  } else {
    setState(() {
      _result = 'You are a minor.';
    });
  }
}
  • Purpose: Determines whether the user is a minor or an adult based on the input age.
  • int.tryParse():
    • Safely converts the text input (_controller.text) into an integer.
    • Returns null if the input cannot be converted (e.g., if the user enters non-numeric characters).
  • if (age == null):
    • Handles cases where the input is invalid (e.g., letters or empty).
    • Displays an error message.
  • if (age >= 18):
    • Checks if the age is greater than or equal to 18 and updates the result to “You are an adult.”
  • else:
    • Handles all other cases where the age is less than 18 and sets the result to “You are a minor.”

6. Displaying the Output

Text(
  _result, // Displays the result of the age check
  style: TextStyle(fontSize: 18), // Styles the output text
)
  • Purpose: Dynamically displays the result (e.g., “You are an adult.”) based on the logic in checkAge.
  • _result:
    • A String variable that stores the output message (e.g., “You are a minor”).
  • setState():
    • Ensures that the UI updates whenever _result is modified.

7. Full Widget Tree

The AgeCheckerScreen combines all components into a single UI layout:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Age Checker')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(labelText: 'Enter your age'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: checkAge,
            child: Text('Check Age'),
          ),
          SizedBox(height: 20),
          Text(_result, style: TextStyle(fontSize: 18)),
        ],
      ),
    ),
  );
}
  • Scaffold: Provides a default app layout with an app bar and body.
  • Padding: Adds space around the content.
  • Column: Vertically stacks the TextField, ElevatedButton, and output Text.

Key Concepts Demonstrated

  1. State Management:
    • The app uses StatefulWidget to manage dynamic UI updates with setState().
  2. Text Input:
    • Demonstrates the use of TextField and TextEditingController for user input.
  3. Conditional Logic:
    • Uses if-else to determine the result based on user input.
  4. UI Design:
    • Combines widgets like Scaffold, Column, TextField, and ElevatedButton to build an interactive interface.