flutter-master-detail-view

What problem does it solve?

This Skill addresses the challenge of creating a user interface in Flutter that seamlessly adapts to different screen sizes, providing an optimal experience for both mobile and larger displays when presenting lists and their corresponding details.

Core Features & Use Cases

• Adaptive Layouts: Implements a Master-Detail pattern that intelligently adjusts its layout based on available screen width.
• Multi-column Support: Utilizes multi-column layouts for larger screens (tablets, desktops) to show both the list and detail pane simultaneously.
• Mobile Navigation: On smaller screens (mobile), it navigates to a separate detail screen, preserving screen real estate.
• Resizable Details Pane: Allows users to resize the details pane on larger screens for a customized view.
• Use Case: Building a contact management app where a list of contacts is shown on the left, and selecting a contact displays their details on the right on a tablet, while on a phone, selecting a contact navigates to a dedicated detail screen.

Quick Start

Implement the MasterDetail widget in your Flutter application, providing the necessary listBuilder, detailBuilder, and onPush callbacks.