Styles part two
Presentation (Building the UI)
Summary
The instructor demonstrates a practical workflow for managing typography by extracting all text styles from the design file upfront and defining them as static constants within a dedicated Styles class. This approach prevents repetitive inline styling and ensures consistency across the application.
Key Ideas
- Centralize typography definitions in a single file to improve maintainability and speed up UI development.
- Analyze the UI design to identify all unique combinations of font size, weight, and family before writing UI code.
- Use size-based naming conventions for style constants (e.g., textStyle18, textStyle20) for easy retrieval.
- Apply custom font families only to the specific text styles that require them, relying on the app's default theme font for the rest.
Code Snippets
abstract class Styles { static const textStyle18 = TextStyle( fontSize: 18, fontWeight: FontWeight.w600, ); static const textStyle20 = TextStyle( fontSize: 20, fontWeight: FontWeight.normal, fontFamily: kGtSectraFine, ); static const textStyle30 = TextStyle( fontSize: 30, fontWeight: FontWeight.normal, fontFamily: kGtSectraFine, ); static const textStyle14 = TextStyle( fontSize: 14, fontWeight: FontWeight.normal, ); static const textStyle16 = TextStyle( fontSize: 16, fontWeight: FontWeight.w500, ); }My Notes
Upfront Abstraction: The core lesson here is workflow optimization. Instead of defining TextStyle inline while building widgets, doing a pass over the design to extract all styles saves context-switching later.
Naming Convention: The instructor names styles primarily by size (e.g., textStyle14). While this works for simpler applications, in larger design systems, semantic naming (e.g., headlineSmall, bodyLarge) is generally preferred. This decouples the style's name from its exact pixel value, making global design changes much easier to implement.
Default Fonts: Notice how the instructor only explicitly sets the fontFamily when it deviates from the norm (using kGtSectraFine). This implies relying on a default font family set globally in the app's ThemeData, which is a best practice.