Book Components

Book components display book information, covers, and actions across the BookWish mobile app.

BookCard

A vertical card displaying a book's cover image, title, author, and optional actions.

Usage

BookCard(
  book: book,
  onTap: () => showBookInfoOverlay(context, book),
  trailing: Icon(Icons.favorite),
)

Props

Property	Type	Required	Description
book	Book	Yes	Book model containing title, authors, cover URL
onTap	VoidCallback?	No	Callback when card is tapped
trailing	Widget?	No	Optional trailing widget (e.g., favorite button)

Anatomy

• Cover Image: Displays book.coverImageUrl with CachedNetworkImage
  • Fallback: Gray container with book icon if no cover
  • Loading: CircularProgressIndicator while loading
• Title: Displayed in AppTypography.bookTitle, max 2 lines with ellipsis
• Author(s): Displayed in AppTypography.author, max 1 line with ellipsis
• Note Button: Shows filled icon if notes exist for the book, opens ScribbleOverlay
• Elevation: Material elevation 2 with 0.08 alpha shadow
• Border Radius: 12px rounded corners

Features

• Note Integration: Watches bookNotesNotifierProvider to show note indicator
• Cached Images: Uses cached_network_image for performance
• Responsive: Expanded cover image adapts to available height

BookListTile

A horizontal list tile displaying book information in a compact format.

Usage

BookListTile(
  book: book,
  onTap: () => showBookInfoOverlay(context, book),
  trailing: Icon(Icons.add),
)

Props

Property	Type	Required	Description
book	Book	Yes	Book model
onTap	VoidCallback	Yes	Callback when tile is tapped
trailing	Widget?	No	Optional trailing widget

Anatomy

• Leading: 48x64 book cover thumbnail
  • Supports both thumbnailUrl and coverImageUrl
  • Fallback: Gray container with book icon
• Title: 2-line max with ellipsis
• Subtitle: Comma-separated authors, 1-line max
• Trailing Row: Custom trailing widget + note button
• Note Button: Same behavior as BookCard
• Elevation: Material elevation 2
• Border Radius: 12px rounded corners

Layout

• Padding: 16px horizontal, 6px vertical
• Leading size: 48x64px
• Uses Flutter's ListTile for standard Material layout

BookCover

BookCover display logic is embedded in BookCard and BookListTile components.

Sizes

• Card: Full expanded width/height (typically ~150x200+)
• Thumbnail: 48x64px (BookListTile)
• Mini: 32x48px (used in LineCard and ReviewCard _BookMiniChip)

Fallback Behavior

When no cover image is available:

• Gray background (Colors.grey[200])
• Centered book icon (CupertinoIcons.book_fill)
• Icon size: 48px (card), 24px (thumbnail)

Loading States

• CachedNetworkImage shows CircularProgressIndicator as placeholder
• Error state shows fallback icon

BookGrid

BookGrid is implemented using Flutter's GridView in pages like SearchPage.

Usage Pattern

GridView.builder(
  padding: const EdgeInsets.all(16),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 0.65,
    mainAxisSpacing: 16,
    crossAxisSpacing: 16,
  ),
  itemCount: books.length,
  itemBuilder: (context, index) => BookCard(
    book: books[index],
    onTap: () => showBookInfoOverlay(context, books[index]),
  ),
)

Configuration

• Columns: 2 per row
• Aspect Ratio: 0.65 (portrait orientation)
• Spacing: 16px between items
• Padding: 16px around grid

BookSearchResult

Search results use BookListTile for compact display in SearchPage.

Implementation

BookListTile(
  book: book,
  onTap: () => showBookInfoOverlay(context, book),
  trailing: AddToWishlistButton(book: book),
)

Features

• Tapping shows BookInfoOverlay with full book details
• Trailing button allows quick wishlist addition
• Scrollable list view with refresh indicator

Common Patterns

Book Actions

All book components integrate with:

• ScribbleOverlay: Note-taking for books
• BookInfoOverlay: Detailed book information
• WishlistProvider: Adding/removing from wishlists

Image Loading

All components use cached_network_image package:

• Automatic disk and memory caching
• Placeholder during load
• Error widget fallback
• Configurable fit (typically BoxFit.cover)

Responsive Design

Components adapt to:

• Screen width (grid columns, card sizing)
• Available height (expanded images in BookCard)
• Text overflow (ellipsis on long titles/authors)

Typography

• Book Title: AppTypography.bookTitle (font weight 600)
• Book Title Small: AppTypography.bookTitleSmall (for mini chips)
• Author: AppTypography.author (lighter weight, smaller size)

Color Palette

• Note Icon: AppColors.inkBlue
• Background: Colors.white
• Fallback Background: Colors.grey[200]
• Shadow: Colors.black at 0.08 alpha