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.