Classes and objects in Flutter - Mini App: Build & Ship

Build: Simple Person Info

This screen shows a person's name and age using a class and object in Flutter.

Target UI

---------------------
| Simple Person Info |
---------------------
| Name:             |
| Age:              |
---------------------

Create a Person class with name and age properties

Create an object of Person with sample data

Display the person's name and age on the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: Create Person class and object
    // TODO: Display person's name and age
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Simple Person Info')),
        body: const Center(
          child: Text(''), // TODO: Replace with person info
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

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

class Person {
  final String name;
  final int age;

  Person(this.name, this.age);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final person = Person('Alice', 30);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Simple Person Info')),
        body: Center(
          child: Text('Name: ${person.name}\nAge: ${person.age}',
            style: const TextStyle(fontSize: 24),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

We created a Person class with two properties: name and age. Then, inside the MyApp widget, we made an object of Person named person with sample data.

We used string interpolation to show the person's name and age inside a Text widget. The text is centered and has a bigger font size for easy reading.

Final Result

Completed Screen

---------------------
| Simple Person Info |
---------------------
| Name: Alice        |
| Age: 30            |
---------------------

The screen shows the person's name and age clearly in the center.

No buttons or inputs; this is a simple display screen.

Stretch Goal

Add a button that changes the person's age when tapped.

💡 Hint

Use a StatefulWidget and setState to update the age property.