Constructors and named parameters in Flutter - Mini App: Build & Ship

Build: User Profile

A simple screen that shows a user profile card using a class with named parameters in its constructor.

Target UI

┌─────────────────────────────┐
│        User Profile          │
├─────────────────────────────┤
│ Name: John Doe              │
│ Age: 30                    │
│ Email: [e-mail]     │
└─────────────────────────────┘

Create a User class with named parameters for name, age, and email.

Use a constructor with required named parameters.

Display the user information in a card on the screen.

Starter Code

Flutter

import 'package:flutter/material.dart';

class User {
  // TODO: Add named parameters constructor here
}

class UserProfileScreen extends StatelessWidget {
  final User user = User(); // TODO: Pass named parameters here

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Profile')),
      body: Center(
        child: Card(
          margin: EdgeInsets.all(16),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Name: '), // TODO: Show user name
                Text('Age: '),  // TODO: Show user age
                Text('Email: '), // TODO: Show user email
              ],
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: UserProfileScreen()));
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class User {
  final String name;
  final int age;
  final String email;

  User({required this.name, required this.age, required this.email});
}

class UserProfileScreen extends StatelessWidget {
  final User user = User(name: 'John Doe', age: 30, email: '[e-mail]');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Profile')),
      body: Center(
        child: Card(
          margin: EdgeInsets.all(16),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Name: ${user.name}'),
                Text('Age: ${user.age}'),
                Text('Email: ${user.email}'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: UserProfileScreen()));
}

We created a User class with a constructor that uses named parameters. Each parameter is marked required to ensure the caller provides all values. This makes the code clear and safe.

In UserProfileScreen, we create a User object by passing values with parameter names. Then we display these values in the UI using string interpolation inside Text widgets.

This approach helps beginners understand how named parameters work in Dart constructors and how to use them in Flutter widgets.

Final Result

Completed Screen

┌─────────────────────────────┐
│        User Profile          │
├─────────────────────────────┤
│ Name: John Doe              │
│ Age: 30                    │
│ Email: [e-mail]     │
└─────────────────────────────┘

The screen shows a card with the user's name, age, and email.

No interactive elements on this screen.

Stretch Goal

Add a button that shows a dialog to update the user's email using named parameters.

💡 Hint

Use a StatefulWidget to hold the user state and a TextField inside an AlertDialog to get new email input.