import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Take 5 - Master Detail Scaffold - Flutter

<SocialEmbed platform="youtube" id="1i73KbI2Uhg" />

## Description

Source Code: https://github.com/rodydavis/flutter_take_5

In this video I walk though how to build a ListView that works great on desktop, mobile and tablets. Similar to UIKit Master Detail Controller we explore how to achieve a similar effect in Flutter.

## Transcript

### Intro

**0:00** · hey guys my name is Rudy in this video we're gonna be building a master-detail scaffold for flutter if you're coming from iOS you're pretty familiar with this because this is one of the components that UIKit gives you out of the box but what about when we want to use this for flutter this is pretty easy if you want to get to where we are now we created a bottom navigation bar that

**0:20** · goes to a navigation rail and a ListView on the left is really useful for navigation because we have a very dynamic way to reuse all of our UI and here you can see it's just a minimal amount of code and we're not having to duplicate logic depending on what screen we're on and if you want to see that we actually have that here in the common folder which you can grab in the source code so to do this we're going to be creating a contact list so let's go ahead and add a new folder called contacts let's make a screen let's go

### Create Contact List

**0:54** · ahead and import material we're going to call it contacts contacts screen contacts screen and let's go ahead and add this item to our navigation

**1:16** · wonderful let's go ahead and fix that import and let's go back so if we hot reload we see that we do have this new navigation item perfect so let's go ahead and start with what you would normally do when you're building out this we would let's go ahead we need to create a contact class and then have some dummy data so here we have our contact object and let's give our our

**1:45** · dummy data function this will allow us to have some UI to work with so what we like to do when building this is you want to at least have let's go ahead and create this into a stateful widget but we want to have a way to click on this in a responsive way so let's have a scaffold a par and we'll just call it contacts or

### Create Detail Scaffold

**2:18** · we're not going to Center the title I'll explain more later and let's give it a body so this is just a pretty standard ListView that you've probably done before let's give it a ListView builder and an item count so this would be your contact length and let's get access to our contact and let's just return a list

**2:52** · I'll go ahead and copy this in for brevity okay awesome

**3:12** · so if you click on the contacts actually we need a hot restart for this since we want to send in our data just a standard ListView and it's nice about this too is we already had the hover effect coming from a Mac OS desktop so not nothing special nothing happens when we click on it so let's go ahead and create our detail screen I went ahead and create

**3:40** · this ahead of time to save time but we can walk through what I did so here we just have a simple contact screen that has an app bar details and two lists tiles that have the data for the name and the email now what we want to do is navigate to this when we select on the list item in the list aisle so here we can pass in contact and this is probably

**4:08** · very familiar to what you've been building already so you see click on the details looks great but it's not really great for desktop and what I mean by that is even on tablet you know when you tap on an item in the ListView this there's so much wasted space right here so let's go ahead and fix that let's go ahead and have a selection that

**4:33** · we want to store inside this widget this will be a value notifier and it'll take a contact by default it's gonna be set to null because you know when you first launch it there's not gonna be any item selected let's go ahead and wrap this out into our own method so we're gonna call this build list view I'm going to

**5:00** · do which it here and we want to grab access to this selection so we can do value changed and let's go ahead and

**5:15** · grab this so this will be right here we can change this lambda2 on select and we'll give it contact in here we can pass in that item and great let's see if it still works see nothing special all

**5:38** · we did was just extract this out into a method perfect so let's work on the responsive side so we want to wrap this with a layout builder so let's go ahead and grab this and do layout builder takes context and dimensions gonna have

**6:03** · our default just go and return this and let's have our breakpoint so by default we just want to show this on anything greater than a tablet or greater than a mobile view so that would be greater than equal to K tablet breakpoint and here we can return it

**6:26** · again still nothing special still showing the same exact ListView but this time what's different is here we want to update the value this selection so if you can see that when we're on the mobile view it'll push but on ListView it'll just do this all so let's go ahead and wrap this with a

**6:51** · row and we're going to give this a container because we need to specify with let's do Const okay this view with it's going to be let's do 300 with

**7:16** · perfect and as you can see already looking pretty good but not there yet so let's do an expanded with a value listenable builder our listenable will

**7:39** · be this selection we can specify that as a contact for the generics I'll do context contact and child and we just

**7:56** · want to return the details but we've got to make sure that it's not null so let's do if contact is equal to null which we return early or actually we're going to turn a scaffold an app bar an empty one

**8:20** · and a body with the center as a child of text and that sex will say no contact see elected wonderful looks great let's see what it looks like so here we go we can tap on these items but this is kind of jarring for the user so let's go ahead and add a vertical divider and to width:0 already looking better

**8:54** · but let's also add dividers in the list view so we can do this really easily by changing this to separated giving a separated builder just takes a context index and we can return a divider of height 0 awesome

**9:16** · already looking great so what's cool about this is you see we have this nice you know expanded view let's go ahead and see what it looks like when you don't have a contact selected so here you know you have sorry I did that too fast so here when you click on contacts

**9:33** · you can see that we just wanted a simple app bar that you know has nothing in it no contact selected you select the contact and you can see the details on the right but then on a mobile view you can go to the details because this is kind of the normal behavior to expect and then all the way out to desktop you

**9:53** · see that we can even now make the detail screen it's self responsive all while keeping our layout as dry as possible this looks great on tablet looks great on desktop and works really well on mobile so let's just go through the code again all we're doing right here is we're specifying a callback for when an item is selected in the ListView we are choosing to have this ListView builder

**10:18** · that then just passes up that selection and then we just have a detail screen and what's cool about this is this does not know what size it is it doesn't care about that size it always shows its app bar and in here we only show this view if we're greater than the tablet you'll notice that we did not use the max the media query size because if we want this widget to itself be responsive let's say if we have if we were doing this detail screen because we want to have this as reusable as possible so that's it for

**10:49** · this video in the next couple videos we're going to be exploring more concepts on how to make responsive UI even better but thanks for watching and hope to see in the next one