Add title and subTitle to book details view

Presentation (Building the UI)

13:35

Summary

This lesson focuses entirely on the Presentation layer, specifically refining the UI of the book details view to match the design specifications. The instructor adds the book's title and author using Text widgets, meticulously comparing the implementation against the Figma design. Key UI adjustments include matching font sizes, applying italic styles, overriding specific font weights using copyWith(), and utilizing the Opacity widget to match the design's text transparency. Additionally, the lesson provides a theoretical explanation on why abstract classes with static constant members are the preferred approach over global variables for managing app-wide styles and colors in Flutter.

Key Ideas

Text widgets are styled using a centralized Styles class to maintain consistency across the app.
The copyWith() method allows modifying specific properties (like weight or italicization) of a predefined TextStyle without altering the base style.
SizedBox is used to provide fixed vertical spacing between UI elements, perfectly matching the design file's measurements.
The Opacity widget blends a child widget into the background, which is useful when the design specifies a solid color with a reduced opacity percentage.
Abstract classes prevent accidental instantiation when creating a container class for app-wide styling constants.
static const variables allow global access to styling values without the need to instantiate their parent class.

Code Snippets

Adding title, subtitle, and spacing to the book details viewdart

return Padding(
  padding: const EdgeInsets.symmetric(horizontal: 30),
  child: Column(
    children: [
      const CustomBookDetailsAppBar(),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: width * .2),
        child: const CustomBookImage(),
      ),
      const SizedBox(
        height: 43,
      ),
      Text(
        'The Jungle Book',
        style: Styles.textStyle30.copyWith(
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(
        height: 6,
      ),
      Opacity(
        opacity: .7,
        child: Text(
          'Rudyard Kipling',
          style: Styles.textStyle18.copyWith(
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    ],
  ),
);

Managing app-wide text styles using an abstract class with static constantsdart

abstract class Styles {
  static const textStyle18 = TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w600,
  );
  static const textStyle20 = TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.normal,
  );
  static const textStyle30 = TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.w900,
    fontFamily: kGtSectraFine,
  );
  static const textStyle14 = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.normal,
  );
  static const textStyle16 = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w500,
  );
}

My Notes

The instructor's detour into abstract class and static const variables is an excellent foundational Flutter/Dart tip. He correctly notes that this pattern acts as a namespace, preventing accidental object creation (e.g., Styles()).

[Editor's note] Performance Optimization: The instructor wraps the subtitle in an Opacity widget. While visually correct, the Flutter team explicitly recommends avoiding the Opacity widget for simple text or shapes if possible, because it forces the framework to paint the child into an expensive intermediate buffer. A more performant approach is applying the opacity directly to the text color: color: Colors.white.withOpacity(0.7) inside the TextStyle.
[Editor's note] Hardcoded Strings: The text strings ('The Jungle Book', 'Rudyard Kipling') are currently hardcoded for UI building. In a true Clean Architecture setup, these will eventually be dynamically mapped from the Domain entity (e.g., book.title, book.author) passed down to the Presentation layer via a Bloc/Cubit state.