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.
