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.

Practice

1. What is a class in Flutter programming?

easy

A. A type of widget

B. A blueprint to create objects

C. A function that runs the app

D. A variable that stores data

Solution

1. Step 1: Understand the role of a class

   A class defines a template or blueprint for creating objects with properties and behaviors.

2. Step 2: Differentiate from other concepts

   Widgets, functions, and variables serve different purposes; only a class is a blueprint for objects.

3. Final Answer:

   A blueprint to create objects -> Option B

4. Quick Check:

   Class = blueprint for objects [OK]

Hint: Classes define blueprints, not widgets or variables [OK]

Common Mistakes:

• Confusing classes with widgets
• Thinking classes are functions
• Mixing classes with variables

2. Which of the following is the correct way to define a simple class named Car in Dart?

easy

A. function Car() { }

B. Car class { }

C. def Car() { }

D. class Car { }

Solution

1. Step 1: Recall Dart class syntax

   In Dart, classes are defined using the keyword class followed by the class name and curly braces.

2. Step 2: Check each option

   Only class Car { } uses the correct Dart syntax: class Car { }. Others use incorrect keywords or syntax.

3. Final Answer:

   class Car { } -> Option D

4. Quick Check:

   Dart class syntax = class Name { } [OK]

Hint: Use 'class' keyword followed by name and braces [OK]

Common Mistakes:

• Using 'def' or 'function' instead of 'class'
• Placing 'class' after the name
• Missing curly braces

3. What will be the output of this Dart code?

class Dog {
  String name;
  Dog(this.name);
  void bark() {
    print('Woof! My name is $name');
  }
}

void main() {
  var dog = Dog('Buddy');
  dog.bark();
}

medium

A. Woof! My name is Buddy

B. Woof! My name is dog

C. Error: Missing constructor

D. Nothing is printed

Solution

1. Step 1: Understand the class and constructor

   The class Dog has a constructor that sets the name property to 'Buddy'.

2. Step 2: Analyze the bark method call

   The bark() method prints 'Woof! My name is ' followed by the dog's name, which is 'Buddy'.

3. Final Answer:

   Woof! My name is Buddy -> Option A

4. Quick Check:

   dog.bark() prints name set by constructor [OK]

Hint: Constructor sets name; bark prints it [OK]

Common Mistakes:

• Assuming default constructor without parameters
• Forgetting string interpolation syntax
• Expecting no output without main()

4. Identify the error in this Dart class definition:

class Person {
  String name
  int age;

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

medium

A. Missing semicolon after 'String name'

B. Constructor syntax is wrong

C. Class name should be lowercase

D. No error, code is correct

Solution

1. Step 1: Check property declarations

   The line String name is missing a semicolon at the end, which is required in Dart.

2. Step 2: Verify constructor and class name

   The constructor syntax is correct, and class names start with uppercase by convention, so no error there.

3. Final Answer:

   Missing semicolon after 'String name' -> Option A

4. Quick Check:

   Every property line needs a semicolon [OK]

Hint: Check each line ends with a semicolon [OK]

Common Mistakes:

• Ignoring missing semicolons
• Thinking constructor syntax is wrong
• Confusing naming conventions with errors

5. You want to create a class Book that stores a title and author, and has a method describe() that returns a string like "Title by Author". Which code correctly implements this?

hard

A. class Book {
String title, author;
Book(this.title, this.author);
String describe() {
print('$title by $author');
}
}

B. class Book {
String title, author;
Book(this.title, this.author);
void describe() {
print('$title by $author');
}
}

C. class Book {
String title, author;
Book(this.title, this.author);
String describe() {
return '$title by $author';
}
}

D. class Book {
String title, author;
Book(this.title, this.author);
describe() {
print('$title by $author');
}
}

Solution

1. Step 1: Check method return type and behavior

   The method describe() should return a string, so its return type must be String and it must use return.

2. Step 2: Analyze each option

   class Book { String title, author; Book(this.title, this.author); String describe() { return '$title by $author'; } } correctly returns the string. class Book { String title, author; Book(this.title, this.author); void describe() { print('$title by $author'); } } returns void and prints instead of returning. class Book { String title, author; Book(this.title, this.author); String describe() { print('$title by $author'); } } returns String but uses print, which returns void. class Book { String title, author; Book(this.title, this.author); describe() { print('$title by $author'); } } omits return type and prints instead of returning a string.

3. Final Answer:

   class Book { String title, author; Book(this.title, this.author); String describe() { return '$title by $author'; } } -> Option C

4. Quick Check:

   Method returns string with return keyword [OK]

Hint: Use return with correct type for methods [OK]

Common Mistakes:

• Using print instead of return
• Omitting return type
• Returning void when string expected