Styling a Home Screen | How to Develop an App with Flutter – Part 4

Whether you want to be a freelancer or work at Flutter development company, our series will help you to become a Flutter developer.

Styling the home screen in your first Flutter app – introduction

In the previous post, we have started to build the home screen.

Today, we are going to add custom fonts and colors to the app and also we will add a smoke animation as a background.
This is how our app will look like after this post:

The initial code, that will be used as a basis for this part can be downloaded here.
The final implementation is available here.

Skip to a section:

• Introduction
• Defining colors
• Customizing fonts
• Extracting strings
• Extract icons paths
• Creating a smoke effect
  • Adding dependency
  • Creating a video player widget
  • Placing a video on the home screen
• Styling the Home Screen – summary

Flutter app uses Theme to share colors and font styles. We can define app-wide themes in MaterialApp or use Theme widget to change the style in a particular place of the app.

Defining colors

Let’s start with creating a new file app_colors.dart and define all colors needed on the home screen.

Having colors defined we can create a factory that will prepare the app theme using our colors.
To do that create app_theme.dart file with such code:

And we can use this style inside ‘MaterialApp’

To access an app theme in code we call:
ThemeData theme = Theme.of(context);

Customizing fonts

According to the design, the app has two fonts: Roboto-Medium and Roboto-Bold.

The first step is to paste font files to the assets folder. We did that for you and we prepared a fonts directory in the assets folder with needed files.
To let Flutter know about new fonts we have to define them in puspec.yaml according to the documentation.

The next step is to add text styles with new fonts to the app theme.
On the home screen, we have four different text styles.
Final implementation of AppThemeDataFactory should look like this:

To use a new font in the Text widget we have to set its style argument.
Let’s make some changes to adjust fonts on the home screen.

And now, running the app we can see that text has proper style the same as in the design.

Extracting strings

One more thing we can do to improve the quality of our code is to extract hardcoded strings to separate class. This helps with easy access to all strings we have in the app. The introduction of translations will be also easier.
To achieve that we will create strings.dart file in the utils directory with all strings defined as static variables:

And we can replace now all hard coded values like this:

Extract icons paths

The same as with strings we can do with paths to icons.
Create app_icons.dart file in the app directory. In that file define AppIcons class with all paths defined. All paths have the same prefix that is assets/images. We will define that as const variable _basePath.

And usage is similar as with strings:

Creating a smoke effect

The home screen is almost ready. One thing that is missing is smoke animation in the background.
We will solve that by playing a full-screen video.

Adding dependency

To play video in Flutter its team provides a plugin to do that. The video_player allows us to play both local video placed in the assets directory as well as videos from the internet.
Underneath it uses AVPlayer on iOS and ExoPlayer on Android.

To use external dependency we have to define it inside pubspec.yaml in the dependencies section and run flutter pub get in the terminal.

Creating a video player widget

The next step is to create a video player. We will do that the same as before with other UI components – as a custom widget.
In video_player‘s Readme we see that we have to add the NSAllowsArbitraryLoads key to the Info.plist file and internet permission to the AndroidManifest.xml file, but as we only want to play video located in the assets folder, we do not need to add that.

Let’s go straight to creating video_player_widget and place the file along with other home screen widgets:

• We import video_player.dart so we can use its classes.
• WideoPlayerWidget accepts videoPath as a required parameter. videoPath can be both local or remote file url.
• Inside initState metod of _VideoPlayerWidgetState we define VideoPlayerController which allows us to control video playback.
• Just after creating a controller using cascade notation we call initialize method which opens given data and pull metadata about video.
• Once the video is initialized we call play method to start the video and also set looping to true so the video will play again once it finished.
• Together with play method we call setState to ensure the first frame is shown after the video is initialized.
• In build method we return VideoPlayer widget initialized with previously created controller.
• In dispose method controller is disposed as well.

Placing a video on the home screen

As player widget is ready we can add it to the home screen. The video will be placed under other components. To achieve that we can use Stack widget which allows us to overlap its children. Top SafeArea will be wrapped together with VideoPlayerWidget in Stack

In the assets folder, we can find the fog.mp4 file which is used as an input for VideoPlayerWidget. To make it be recognized by the app we have to add videos directory to the pubspec.yaml assets section

And that is all, now we can run the app

That looks exactly as we wanted to!
And with that, we have finished the first screen in our app.

Styling the Home Screen – summary

Today we’ve learned how to style our first Flutter app, how to use external dependency, and play video in Flutter. I hope our Flutter tutorial for beginners will help you in getting started with Flutter app development.

In the next article, we will create a network layer and learn about JSON serialization by connecting with air quality public API. Stay tuned, and good luck with your app!

In the meantime, check out in10 – RSVP & ETA Tracking App which we made with Flutter.

Related posts