Add styles file and text to home

Presentation (Building the UI)

10:18

Summary

This lesson focuses on refactoring the presentation layer and centralizing text styles in a Clean Architecture Flutter app. The instructor begins by moving the featured books list into its own dedicated widget file to keep the home view clean and modular. To handle repeating typography found in the design, an abstract Styles utility class is created to store constant TextStyle definitions. Finally, a new "Best Seller" section is added to the home view, utilizing the centralized style, and the overall screen padding and alignment are adjusted to match the UI mockups.

Key Ideas

Refactoring complex widgets into separate files keeps the UI view body clean and improves maintainability.
Abstract classes are ideal for utility and configuration classes (like styling) to prevent accidental instantiation.
Storing TextStyle definitions in a centralized Styles class ensures design consistency across the application.
FontWeight.w600 is the canonical equivalent of the "SemiBold" weight in Flutter.
Applying padding to a parent Column allows you to remove redundant horizontal padding from its individual child widgets.
CrossAxisAlignment.start aligns children to the leading edge of a Column.

Code Snippets

Centralized text styles utilitydart

import 'package:flutter/material.dart';

abstract class Styles {
  static const titleMedium = TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w600,
  );
}

Home view body with centralized styles and paddingdart

import 'package:bookly/core/utils/styles.dart';
import 'package:bookly/features/home/presentation/views/widgets/custom_app_bar.dart';
import 'package:bookly/features/home/presentation/views/widgets/featured_list_view.dart';
import 'package:flutter/material.dart';

class HomeViewBody extends StatelessWidget {
  const HomeViewBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CustomAppBar(),
          FeaturedBooksListView(),
          SizedBox(
            height: 50,
          ),
          Text(
            'Best Seller',
            style: Styles.titleMedium,
          ),
        ],
      ),
    );
  }
}

My Notes

The instructor makes a deliberate architectural decision to create a dedicated Styles class holding static const TextStyle objects instead of extending Flutter's built-in ThemeData.textTheme. He acknowledges TextTheme but argues that accessing it requires writing too much boilerplate (e.g., Theme.of(context).textTheme.titleMedium).

Trade-offs: While the instructor's approach is faster to type (Styles.titleMedium), it bypasses the BuildContext. This breaks Flutter's ability to automatically adapt text styles for Dark/Light mode depending on the app's theme state.
[Editor's note]: If you use a static Styles class, be prepared to manually handle color switching if your app introduces a dark mode later.
[Editor's note]: The instructor hardcodes the string 'Best Seller'. For true Clean Architecture, literal strings shouldn't be hardcoded in the presentation layer; they should be extracted to a localization or constants file.