How to Build an App with Flutter – Part 4. Styling a Home Screen
Learn how to build your first app with Flutter. This time we will focus on styling your home screen.
How to build an app with Flutter? Follow our series “Flutter app development tutorial for beginners”. We’ve published the following posts so far:
- How to Build an App with Flutter – Part 1. Introduction
- How to Build an App with Flutter – Part 2. Project Setup
- How to Build an App with Flutter – Part 3. Home Screen
- How to Build an App with Flutter – Part 4. Styling the Home Screen – you are reading this
What’s more, we prepared also a Roadmap that can be useful in your Flutter development journey:
- Roadmap for Flutter developers in 2020 – feel invited to contribute!
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:
Skip to a section:
- Defining colors
- Customizing fonts
- Extracting strings
- Extract icons paths
- Creating a smoke effect
- Styling the Home Screen – summary
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);
According to the design, the app has two fonts:
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.
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.
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
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.
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.
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.dartso we can use its classes.
- WideoPlayerWidget accepts
videoPathas a required parameter.
videoPathcan be both local or remote file url.
VideoPlayerControllerwhich allows us to control video playback.
- Just after creating a controller using cascade notation we call
initializemethod which opens given data and pull metadata about video.
- Once the video is initialized we call
playmethod to start the video and also set looping to
trueso the video will play again once it finished.
- Together with
playmethod we call
setStateto ensure the first frame is shown after the video is initialized.
buildmethod we return
VideoPlayerwidget initialized with previously created controller.
disposemethod 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
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.