Developing a daydream backdrop in Flutter

In this blog post we will develop a daydream backdrop in Flutter. There will be examples and code snippets as we progress. However, if you want to see the final code you can always have a look at the Github repo.

I wrote a backdrop app for my Android TV called APOD Daydream. To be fair it’s one of the few apps I use on a daily basis, even thought it’s a really simple project. Having said that, we are going to rewrite it in Flutter.

Before we begin, let’s setup your development environment. Follow the instructions on the website to setup your Flutter environment. Now, shall we?

Creating the flutter project

If you are using an IDE such as Android Studio or Visual Studio Code. Go to: New Project -> Flutter project.

If you prefer using a terminal:

flutter create myapp

What are we building?

That’s how our application will look in the end:

We will be using a public service called Astronomy Picture of the Day This is the public API documentation.

Alright, now that we know our requirements, let’s code!

Part 1 – Creating the data class

We are going to be using a library called JsonAnnotation. As a result, we don’t have to do the JSON parsing manually. Include it in your pubspec.yaml first:

Now, let’s create the data class we will need to parse the API response from the APOD API.

http://gist.github.com/techpotatoes/8a35e7be944919718b8d0ca38bc6fa84

As you can see our data class expects a part ‘apod.g.dart’ . This is the generated code for handling the json parsing. In order to generate it, you must run the following instruction in your terminal:

flutter packages pub run build_runner build

Part 2 – Creating the repository

The repository is going to be responsible for making the network request and parsing it to a our recently created apod.dart.

First things first, let’s add the http library to the project. We need it to make network requests, as the name suggests.

Create a new file and name it apod_repo.dart :

Part 3 – Creating the UI

We are almost done, we have a model to represent the data we get from the APOD API. We have a repository to handle the request and the json parsing. Now, we are going to implement the UI of our app.

We are going to be using a library for image and cache handling:
Cached network image – A flutter library to show images from the internet and keep them in the cache directory.

As usual, let’s first add both dependencies to our pubspec.yaml:

Let’s create a new widget to hold our main page. Create a new file and name it backdrop_page.dart:

Now change your main.dart file and add the new widget:

Things to notice from the above implementation:

• There is a TODO on the backdrop_page.dart. This will be replaced with our clock implementation which will update the time every minute.
• The layout of the backdrop page is quite extensive. I could’ve broken it down into even smaller parts. Be mindful when building complex UI’s in Flutter. As a result, you will end up with quite a lot of nested widgets. It makes sense to extract portions of the screen into widgets.

Part 4 – Implementing the clock

If you remember we left a TODO in the backdrop_page.dart file. Let’s finish our clock implementation now.

We are going to use a StreamBuilder. Therefore, we won’t have to reload the entire page every time we update the time.

Let’s start creating our clock handler class. First of all, we are going to need a new dependency for formatting date and time:

Now, let’s create a new file and name it backdrop_clock.dart:

All the class above does is updating the time and setting a timer to do the same thing in 1 minute. The way it tells the view to change it’s state is sending a new object in the minuteStream. The view has a StreamBuilder listening to new emissions from the minuteStream.

Let’s see how the time text view will look. Replace the current hardcoded “11:00” textView with the following:

Part 5 – Caching the network request

Alright, we have a working Android TV backdrop. It shows an image, from a public service called APOD. In addition to that, it shows a title and brief explanation regarding the picture. It also shows the current time.

There is though, one improvement we can make. The image only changes once daily and the service is public. Therefore, we should avoid making the same call every time our TV goes into daydream mode.

We can solve this problem caching the network request and only getting it again, after let’s say, 12 hours.

The DefaultCacheManager follows what the cache headers from the call dictate. But, we don’t want to follow that, since the APOD API actually returns “no-cache.” As a result, let’s start creating a custom cache manager. But first, new dependency :

Now, create a new file and name it apod_cache_manager.dart:

Now we just have to change the apod_repo.dart code:

Conclusion

The main goal of this post was to develop a daydream backdrop in Flutter. We didn’t go into details on how to create the Daydream service and everything needed to make it a backdrop in Android TV. However, you can have a look at the source code of my APOD Daydream app written in Kotlin in github and try it yourself.

Also, you will find that, no tests were written for this project. Shame! Shame! The post would be way to big if I did. I’ll have a post covering up unit and UI tests in Flutter, soon.

Again, all the code written in this post can be found here in github.

Subscribe to get notified of new posts. Thanks