Chapter 55 — Profile Card

Level: intermediate Estimated time: 8 h Prerequisites: PART 1A (chapters 01 to 18) and PART 1B (chapters 43 to 54) What you will be able to do by the end: build a polished, configurable, reusable UI component from scratch, display it in a list, adapt it to dark mode and tablets, and open a detail screen on tap.

55.0 — Chapter Objectives

By the end of this chapter, you will be able to:

• read a requirements document and translate it into a list of technical steps;
• create a clean Flutter project and organize your files by role;
• define consistent light and dark themes with ColorScheme.fromSeed();
• write a pure Dart model class with no dependency on Flutter;
• display an avatar with no image file at all, based on a name's initials;
• draw a banner with a linear gradient;
• overlay an avatar on a banner with Stack and Positioned;
• align three statistics with vertical dividers of the right height;
• display a list of badges that automatically wraps to the next line with Wrap;
• display a level progress bar with LinearProgressIndicator;
• place a row of action buttons that never overflows;
• split a large build() into small, named, reusable widgets;
• make a widget configurable with final fields and callbacks (VoidCallback);
• display a list of profiles with ListView.builder;
• switch the whole application to dark mode from the AppBar;
• change layout beyond a given width with LayoutBuilder;
• open a detail screen on tap with Navigator.push and animate the transition with Hero;
• recognize and fix the most common layout errors on this type of screen.