Disney+ but better — UI clone in Flutter — Part 1

Design by Andre Carioca

Hi everybody,
This time we are going to clone this beautiful redesign of Disney+ using flutter. We are only going to be focusing on the frontend and not fetching data from a backend server.
This is going to be a big-ish project; so we are going to split it into the following parts:

• Part 1 — The Home Screen
• Part 2 — The Movie/Tv show screen
• Part 3 — The Categories screen … Coming soon
• Part 4 — the Downloads screen … Coming soon

You can get the source code here

Let’s get started :)

Let’s clean the boilerplate code of our new app to just return an empty Scaffold widget.

Now let’s create a column that will consist of the upper half(above that huge everything text, let’s call this the header) and the part below it. To make the header:

• First let’s create a stack that will contain the background image, row of buttons, and the circle avatar in the top right corner.
• To get the fade effect on the bottom we will use a container with a gradient in a positioned widget.

For the circle Avatar, let us use the cached network image package. We are going to set the fade-in curve to Curves.easeIn and fit to boxfit.cover. To get the circular shape, we are going to use the itemBuilder of the cachedNetworkImage() to customize the display of the image. This builder takes the context and image provider as arguments. we are going to return the return CircleAvatar and pass the ImageProvider in the background image property.

Remember

for this to work you need to add the internet permission in the AndroidManifest.xml file in the ./android/app/src/main directory

For the circular icon buttons, let’s create a stateless class CircularIconButton.

Now let’s create the row of buttons in the header, For this, we are again going to use the positioned widget whose child will be a row of Circular Icon Button

We are finally done with the header section of the app, Now let’s continue to build the Movie suggestions section

First, let’s build the Divider between the header and the movie suggestions. This will contain the Category name, a search icon, and the downloads button.

• Let’s create a row that will house the category name and the buttons.
• For now, let’s create a text widget that shows ‘Everything’, We will later add a gesture detector to detect a tap and show the different categories.
• Now, let’s use our Circular Icon Button to create a button with a search icon and another with a down arrow to show downloads.

Now let’s create the movie suggestions list, To do this we are going to:

• Create a Listview.builder which returns a column containing the section name and the movie tiles.
• Now, let’s return a text widget in the column which returns the ‘row_name’ from our data.
• Then let us return SingleChildScrollView which will contain all the movie tiles. We will pass a row as the child.
• To populate the movie tiles we are going to create a function that is going to return a list of widgets, We will have to return different types of tiles, some expanded and some normal, to do this we are going to access the flag in the data named ‘isExpanded’.

Now only a few final touches are left, For the Keep Watching section, we would have to return a progress bar to show how much the user has already watched the movie. To do this

• in the item builder of our ‘getMovieTiles’ function, we are going to return a stack that has the movie poster in the background and a progress bar on the bottom. So we create a bool ‘isKeepWatching ’and based on that value we return the corresponding movie tile.

We finally finished the home screen of the disney+ redesign by Andre Carioca
To get notified about the other parts follow me :)