Create custom book details app bar

Presentation (Building the UI)

10:20

Summary

This lesson focuses on building the user interface for the book details screen, specifically the custom app bar. It guides through the process of setting up navigation to the new screen using GoRouter, defining the screen's layout with a Column and a custom app bar widget, and incorporating a SafeAreawidget to ensure the UI starts below the system status bar. The instructor emphasizes the importance of maintaining a clean and modular codebase by creating separate widgets for distinct UI components and encourages following design specifications for padding and layout consistency.

Key Ideas

Use GestureDetector with an onTap callback to trigger navigation to a new screen.
GoRouter's push method allows navigating to a specific path defined in the application's router configuration.
Define route paths as constants in a dedicated AppRouter class for better manageability and consistency.
A Scaffold widget provides the basic structure for a screen, with the body property containing the main UI content.
SafeArea is essential for preventing UI elements from being obscured by system-level features like the status bar or notch.
A Column widget is used for vertical layout, while a Row is suitable for arranging items horizontally, such as icons in an app bar.
IconButton provides a clickable icon with built-in padding and a visual ripple effect on press.
Use MainAxisAlignment.spaceBetween in a Row to push children to the extreme ends of the available horizontal space.
Consistent padding based on design specifications ensures a professional and visually appealing user interface.
Creating separate files for custom widgets promotes code reusability and maintains a clear project structure.

Code Snippets

Setting up navigation to the book details view in BestSellerListViewItemdart

GestureDetector(
  onTap: () {
    GoRouter.of(context).push(AppRouter.kBookDetailsView);
  },
  child: Sizedbox(
    height: 125,
    child: Row(
      // ... list item content
    ),
  ),
)

Defining the book details route in AppRouterdart

abstract class AppRouter {
  static const kHomeView = '/homeView';
  static const kBookDetailsView = '/bookDetailsView';

  static final router = GoRouter(
    routes: [
      // ... other routes
      GoRoute(
        path: kBookDetailsView,
        builder: (context, state) => const BookDetailsView(),
      ),
    ],
  );
}

BookDetailsView widget using SafeAreadart

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: BookDetailsViewBody(),
      ),
    );
  }
}

CustomBookDetailsAppBar widget implementationdart

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.close),
        ),
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.shopping_cart_outlined),
        ),
      ],
    );
  }
}

My Notes

This lesson highlights several practical UI development techniques in Flutter:

Navigation with GoRouter: The instructor demonstrates how to seamlessly integrate screen navigation using a popular routing package.
Layout Organization: The use of Column, Row, and custom widgets showcases a clear approach to structuring complex UI designs.
SafeArea Utility: The lesson emphasizes the importance of SafeArea for a consistent user experience across different devices and screen configurations.
Design Fidelity: Paying attention to padding and spacing based on design assets is crucial for achieving the intended visual result.
Code Modularity: Encouraging the creation of separate widget files for distinct UI components is a fundamental principle of clean and maintainable code.
[Editor's note] While the instructor uses push for navigation, consider if go might be more appropriate depending on your application's navigation stack and deep-linking requirements.