Have you noticed that I wasn’t active lately on this blog? I was pretty busy writing an Ecommerce App for a Freelance client.

Well, you probably don’t care but I didn’t find a better way to start this article. (My real intention is to say that if you need me for a freelance project you can contact me via twitter, or by email).

Enough Blabla, let’s get the source code: https://github.com/cybdom/netflixy_flutter

Main Menu Page – UI:

For once I have chosen a very easy UI to replicate, to start we have an AppBar, I didn’t like the default elevation so I set it to 0, and the default background wasn’t great either so I set it to clean white.

The leading property in the AppBar widget allows you to set the Menu icon button that you can see in the top-left. The top-right icon is set using the Actions argument. And for the title, I used a Text Widget with red color as a TextTheme.

Below we have a PageView.Builder, we use a PageView.Builder to optimize performance and to generate the children using the builder function.

Here the children of the PageView represent the large movie card. To build that we use a Container to give it the BoxShadow, BorderRadius, and margin. Then we have a Stack, that allows us to use Positioned to stick the movie title at the bottom and give it a pretty transparent black background using a container. The other child of the Stack is Positioned.fill widget we use it to get the movie picture expanded on the card.

Further down, we have the category list, as always we have to put the ListView.builder inside a fixed height container. The children of the ListView are simple containers with red background color and a child of Text.

In the end, we have a list of movies, but this time we don’t use PageView because we don’t want to take the full width of the screen. Instead, we want the Container to be taller than wide. To achieve that we create a custom widget, and set it’s width to be 2.5 thirds of the screen width this way we can show 2 movie containers and a half.

Details Page – UI:

I hope that you still have some energy left to continue reading!

This time in this UI I didn’t use the AppBar Widget. Instead, I used a Stack…

I created a standalone widget and named it hero:

To specify the height of this widget I used a Container and set the height to 2.5 of the device screen. Inside of the container, we have the Stack that contains a top Positioned Row that represents the “AppBar”, a Positioned.fill ClipPath widget with our CustomClip function, this is how we achieve the arc at the bottom of the image.

Aligned at the bottomCenter we have an InkWell circle-shaped container with a play icon as a child. The InkWell has its onTap property trigger a Navigator.pushNamed function that sends us to the fullscreen video player.

This is probably the easiest part of the app. Since we are already inside a Column we can just add Text Widgets and change there style to achieve this result.

The rating bar is a custom widget I made in exactly 23 lines of code. It takes two arguments: Length and Rating, length represents the number of stars and the rating is the number of “checked/enabled” stars.

To conclude, we will talk about the Section Container which is just a custom widget I made to give each section a title and a right arrow icon, it could be used to enter to that specific section or category. as a child here it takes a ListView.builder of screenshots:

Container( margin: EdgeInsets.only(right: 11.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Image.network(screenshots[id]), ), );

The container gives a margin between screenshots, and ClipRRect gives the rounded corner effect. And there you go!

Wrapping Up:

Make sure to follow me on Twitter: https://twitter.com/cybdom to be notified of the upcoming tutorials.

Creating these tutorials and coding these UI’s take time and thus money. Maintaining this website has also a cost, so if you want to help me cover these costs buy me a coffee: https://www.buymeacoffee.com/bi3cp0Zk5

Thank you! See you in the next episode.