Create the Project
If you don’t have a project set up yet:
- Open your terminal or command prompt.
- Create a new Flutter project:
flutter create age_checker_app
- 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
- Input Age:
- The user enters their age into the
TextField
.
- The user enters their age into the
- Check Age:
- The user presses the “Check Age” button.
- The
checkAge
function runs, processes the input, and updates_result
with the appropriate message.
- Display Output:
- The
_result
message (e.g., “You are an adult.”) is displayed below the button.
- The
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 setsAgeCheckerApp
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.
- Extends
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 theTextField
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).
- Safely converts the text input (
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”).
- A
setState()
:- Ensures that the UI updates whenever
_result
is modified.
- Ensures that the UI updates whenever
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 theTextField
,ElevatedButton
, and outputText
.
Key Concepts Demonstrated
- State Management:
- The app uses
StatefulWidget
to manage dynamic UI updates withsetState()
.
- The app uses
- Text Input:
- Demonstrates the use of
TextField
andTextEditingController
for user input.
- Demonstrates the use of
- Conditional Logic:
- Uses
if-else
to determine the result based on user input.
- Uses
- UI Design:
- Combines widgets like
Scaffold
,Column
,TextField
, andElevatedButton
to build an interactive interface.
- Combines widgets like