Best seller item part 2

Presentation (Building the UI)

08:34

Summary

This lesson focuses on building the presentation UI for the best seller list item, specifically adding the book title and managing its layout spacing. The instructor emphasizes extracting exact pixel measurements from design tools (like Figma or Adobe XD) to configure SizedBox distances, rather than guessing paddings and margins. To prevent text from causing overflow errors on smaller devices, the lesson introduces responsive constraints using MediaQuery to restrict the title's width, alongside maxLines and TextOverflow.ellipsis to gracefully truncate long text within a fixed list layout.

Key Ideas

Design measurements should be extracted exactly from the design file (using Alt/Option + hover) to eliminate guesswork in UI spacing.
SizedBox enforces strict width or height constraints between widgets to perfectly match design mockups.
Hardcoded static widths for text containers cause rendering errors (overflow) on narrow mobile screens.
MediaQuery.of(context).size.width provides proportional sizing (e.g., 50% of screen width) to make child widgets responsive.
maxLines restricts a Text widget's vertical expansion, ensuring list items maintain a consistent uniform height.
TextOverflow.ellipsis truncates oversized text with "..." to visually indicate that the content continues.

Code Snippets

Final state of BestSellerListViewItem with spacing and text overflow handlingdart

class BestSellerListViewItem extends StatelessWidget {
  const BestSellerListViewItem({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 125,
      child: Row(
        children: [
          AspectRatio(
            aspectRatio: 2.5 / 4,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.red,
                image: const DecorationImage(
                  fit: BoxFit.fill,
                  image: AssetImage(
                    AssetsData.testImage,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 30,
          ),
          Column(
            children: [
              SizedBox(
                width: MediaQuery.of(context).size.width * .5,
                child: Text(
                  'Harry Potter and the Goblet of Fire',
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: Styles.textStyle20,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

My Notes

The instructor's reliance on MediaQuery for sizing the SizedBox (.5 of the screen width) is a quick fix to prevent overflow, but it's an anti-pattern for this specific layout. It assumes the total screen width is the only constraint and ignores the width already consumed by the image and the 30px spacer.
[Editor's note] Better approach: Wrap the Column containing the text in an Expanded widget. This signals the framework to automatically consume all *remaining* horizontal space in the Row. This eliminates the need for hardcoded MediaQuery math and ensures the widget remains fully reusable and responsive, regardless of the parent container's constraints.
Combining maxLines: 2 with TextOverflow.ellipsis is standard best practice for list view titles to preserve consistent UI boundaries.