Simple Project: 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:bashCopy codeflutter create age_checker_app
3. Navigate to the project folder:bashCopy codecd 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.