19. Platform-Specific App Assets

Written by Stef Patterson

So far, you’ve built Flutter apps using the Dart language and the various Flutter idioms. You then built and deployed those apps to iOS and Android devices without having to do anything special. You may have even tried running your apps in Chrome or as a desktop app. It’s almost magical.

Sometimes you’ll need to add platform-specific code and assets to cater to the needs of a particular store or operating system.

For example, you’ll need to change how you specify the app icon, the launch assets and the splash screen to suit each platform.

In this chapter, you’ll go through the process of setting up some important parts of your app to look great regardless of which platform your users choose.

Open this chapter’s starter project in your Flutter IDE. Remember to click the Get dependencies or execute flutter pub get from Terminal.

Note: This chapter is about platform-specific app assets. For your app features to function you’ll need to add your API Key that you used in the previous section to lib/network/spoonacular_service.dart. If you don’t plan on using the app features, you can skip this step.

You’ll need to use native development tools when working with platform-specific assets, so you’ll need to have the latest version of Xcode to complete the iOS and macOS portions in this chapter.

Setting the App Icon

The app icon is one of the most important pieces of any app’s branding. It’s displayed on the store page and the device home screen, as well as in notifications and settings. It’s the avatar for your app, so it must look perfect! To do this, you need to use constraints.

Android and iOS not only use different constraints, but they also specify them differently, which means you need to tweak your icon for each platform.

By default, when you create a new Flutter project it sets the Flutter F logo as the project’s icon:

Not only is this not branded to your recipe app, but the app stores aren’t likely to approve it.

You can have the same icon for multiple platforms, or you can set it up for each platform individually. For this chapter they’re going to look very similar, including when run in Chrome.

Your first task will be to say “Good-bye, dear Flutter icon!” by updating your app to have a custom image that looks great on each platform.

Hello, lovely Chef icon!

In addition to adding your app icon, you’ll also change the name of your app and prepare the launch screen for multiple platforms.

Ready to get started? OK then, you’ll be starting with iOS.

Setting up iOS Icon and Launch Assets

You’ll work on the iOS app icon and name at the same time.

Optimizing the App Icon for iOS

When you create a Flutter project it creates various subfolders for each platform. The Flutter framework generated ios and macos subfolders that contain the libraries and support files needed to run on iOS and macOS. In those folders there is an Xcode workspace, Runner.xcworkspace.

Note: iOS and macOS developers, Flutter apps use Runner.xcworkspace instead of the traditional Runner.xcodeproj.

There are a couple of ways to open the Xcode project. You can use Finder or your IDE.

In Finder, open the chapter materials files and double-click starter/ios/Runner.xcworkspace. If you have Xcode open, you can also navigate to the folder and open it.

If you’re using Android Studio/IntelliJ right-click on the ios folder, navigate to the Flutter item and you’ll see Open iOS Module in Xcode, like in the picture below.

VSCode is a little different. When you right-click on the ios folder you’ll see Open in Xcode.

Flutter uses a workspace to build the app because, under the hood, it uses Cocoapods to manage iOS-specific dependencies required to build and deploy iOS apps. The workspace contains the main runner project and the Cocoapods project as well as all the supporting files to build and deploy an iOS app.

This project contains a lot of boilerplate and helpers to run the app within the iOS app context. Don’t worry about building the app from Xcode. Continue to use Android Studio or the command line to build and deploy to a simulator.

Viewing the App Icon

To see the app icon, open Runner ▸ Runner ▸ Assets.xcassets. This is an asset catalog, a way of organizing assets in an Xcode project.

Inside, you’ll see AppIcon and LaunchImage.

Click AppIcon to see all the devices and resolutions supported by the default Flutter icon.

In Finder, open assets/icons/ios from the chapter materials. Drag each of the images inside into the asset catalog, grabbing the right one for each size. You can tell which is which by the name.

Don’t worry if you grab the wrong one: A yellow warning triangle will appear next to any image that isn’t the right size.

Note: When creating your own app icons, make sure you save them as PNG files, without alpha channels.

Next, you’ll change the name of the app, displayed next to the app icon on the device.

Naming Your App

To set your app’s name for iOS, open Runner ▸ Runner ▸ Info.plist.

Note: Info.plist is similar to the Android AndroidManifest.xml in that it contains information about your app for the OS to use.

Under Information Property List, change the Bundle display name to: Recipe 🔎.

Save these changes, leave Xcode open and return to your Flutter IDE.

Build and run your app for iOS.

That looks better! :]

The last finishing touch is adding a launch screen.

Adding an iOS Launch Screen

It takes a few moments for the Dart VM to spin up when users launch the app, so you’ll give them something to look at instead of a white screen.

In following Apple’s Human Interface Guidelines you should have no text included on your launch screen and it should closely resemble your app’s landing page. Setting an iOS launch screen is straightforward.

Back in Xcode, select Assets.xcassets and this time select LaunchImage.

You’ll see three boxes to represent the launch image at 1x, 2x and 3x resolution.

In Finder locate assets/launch image/loading.png in the chapter materials and drag it onto the 1x square.

This is a high-resolution image, so you need to tell iOS to scale it for high-resolution screens.

In the Inspector pane, change the Scales value to Single Scale.

This setting tells the system there’s just one version of the image. This is preferred for images like photographs, which have a native high resolution.

You’ll see a yellow triangle displayed in the 2x and 3x boxes. While pressing Shift key, select each of these boxes and press Delete.

The two boxes are now gone and your new launch screen image is set up.

The user will see this image while the app launches until the main screen is ready.

Returning to your Flutter IDE, build and run on iOS. Watch closely as the app launch can be fast.

By using the same background as the initial page the result is a smooth transition when your app is launched.

Great job! You’ve set up the iOS side, now you’ll set up the macOS version.

Setup macOS Icons

You’ll find that setting up the macOS icons is very similar to what you did for iOS.

In Finder navigate to starter/macos/Runner.xcworkspace and open it with Xcode.

Next, open Runner ▸ Runner ▸ Resources ▸ Assets.xcassets. This will look familiar and is similar to the iOS asset catalog.

For macOS you’ll see only AppIcon, no LaunchImage.

Click AppIcon to see the different sizes and resolutions supported by the default Flutter icon.

In Finder, open the chapter materials assets/icons/macos. Just like you did for iOS icons, drag each of the images onto the asset catalog.

That’s it! You’ve set up the macOS app icon. You won’t be renaming the macOS app.

Return to your Flutter IDE, build and run on macOS.

Looks awesome!

Note: You may see warnings from some of the packages, ignore them. The app will still run. If it doesn’t run then execute the following from Terminal and then re-run your app.

flutter clean && flutter pub get

Now it’s time to set up the Android icons.

Set Up Android App Icon and Launch Assets

When you work with your own custom artwork and Android apps, there are a few more steps you need to take, beyond just copying and pasting from a folder.

Optimizing the App Icon for Android

In Android Studio open android/app/src/main/AndroidManifest.xml. This file defines many of your app’s Android properties related to launching, permissions, Play Store and the Android system.

One of the properties under application defines the launcher screen icon:

The @mipmap means that it resolves to a mipmap-{resolution} folder to load an asset fit for the device’s screen scale. ic_launcher is the icon filename.

Under android/app/src/main/res, you’ll find the various mipmap- subfolders.

In Finder, open assets/icons/android from the chapter materials. Copy the res folder and replace android/app/src/main/res in Android Studio.

If you receive a pop-up confirming you want to copy the folders to the specified directories, click Refactor or OK or Overwrite for all, depending on your Android Studio version.

Expand the android/app/src/main/res folder and verify you’ve pasted the res folder in the correct place. It should be at the same level as the java and kotlin folders, not inside the existing res folder.

Hot reload and hot restart are not enough to see the updated icon.

For these changes to take effect, you need to stop the app and run it again.

On the home screen, you’ll now see the new launcher icon. Run the app on an Android device or emulator to see one of the following:

Great, you’ve just swapped the default assets for your cool custom ones.

If you need to adjust the icon fill size, or if you’re working on your own app later and want to import Android images, you’ll need to import and resize the artwork. That’s next!

Personalizing the App Icon for Android

For these next few steps you need to work in the Android portion of your app and not within the Flutter project.

Open the Android folder directly from the Android Studio menu, choose File ▸ Open and navigate to your project’s android folder.

Finally, click Open.

Wait until the Gradle sync is complete. The time it takes your project to finish might vary. You’ll see messages flashing fast in the bottom right corner of the window until it’s done.

Navigate to the app folder, right-click on res and choose New ▸ Image Asset.

The Configure Image Asset pop-up window will display. Click the folder icon to open the custom image.

Locate your master artwork image. In this case, you’ll find it in the project assets/ folder. Select the IconArtwork_1024x1024.png image and click on Open.

The loaded image will appear like this.

If the cook figure is outside the safe zone, use the Resize slider to adjust the size. Make sure the cook figure is inside the circle, which is the safe zone, as shown below. When done click Next.

The next screen displays the path where you’ll save the assets. Keep in mind this is for the Android project, not your Flutter project, so the folder names look different from what you’ve worked with so far.

Leave the defaults and click Finish.

Close this Android project and go back to your Flutter project.

You’ve now seen how to resize custom artwork for your Android app. What’s great is that after you finish these updates, your Flutter app updates automatically!

As before, for these changes to take effect, you need to stop the app and run it again. You’ll see the same launcher icon. Run the app on an Android device or emulator to see the following:

Next, you’ll change the app name which will help address the names with the ... shown on some devices.

Changing the App’s Name for Android

Now that you have a shiny new icon on the device launch screens, you’ll notice that the app’s name isn’t always formatted nicely, which detracts from the experience.

Setting the launcher name is an easy fix, but you also have to do it for each platform.

Return to android/app/src/main/AndroidManifest.xml. Find the android:label property of the application node.

Change the text to Recipe 🔎.

Build and run the app on Android. By choosing a shorter label, the name will fit on more Android devices.

Next, you’ll address the Android splash screen. Don’t worry, it’s really easy.

Setting an Android Splash Screen

As of Android 12, there is a default splash screen that animates from the launcher, shows the app icon and then fades into your app’s landing page.

Boom! You get off easy with Android - it’s done for you and is a nice developer experience. See, easy, right? ;]

Note: You can customize this animation, but this requires specialized assets and additional skills that are out of scope for this book. For more information, see the Splash Screen Tutorial for Android or the Android Animations by Tutorials book.

Next, you’ll address the web browser tab icon.

Set Up Web App Icon and Title

Have you ever paid attention to the browser tab icon? It’s nice to have those when you have a bunch of tabs open on different sites. They can help you quickly identify which site each tab represents.

Plus, it’s nice to have a good name for the tab, so you’ll also change the title of the tab.

Updating Favicon

The icon displayed on a browser tab is known as the favicon. It’s a square image that represents the website. The favicon is either 16x16 pixels or 32x32 pixels and can be 8-bit or 24-bit colors.

In Finder open assets/icons/web and drag favicon.png into your projects web folder in your Flutter IDE. When prompted make sure to overwrite or refactor the file.

Now that you’ve updated the icon, time to update the title.

Updating Title

There are two ways to set the title of the browser tab. You can either set the title in the HTML or in the Dart code. Each is displayed at different times.

To set the title in the HTML, open web/index.html and find the following line:

<title>Recipe Finder</title>

Replace it so it looks like this:

 <title>Recipe 🔎</title>

When your app is loading the title defined in the HTML is displayed.

Next, open lib/main.dart. In MaterialApp Find // TODO: Update title and replace the title beneath it with:

'Recipe 🔎'

The title defined in here is displayed after your app is fully loaded.

Build and run on web/Chrome and take a look at the tab. Pretty cool, right?

Great job! You’ve updated your app’s branding for iOS, Android, macOS and web.

The next two chapters will guide you through deploying your app to the App Store and Google Play Store. Aren’t you glad you’ve branded your app? ;]

Key Points

• Flutter generates app projects for iOS, Android, desktop and web, which you can customize with your brand.
• These projects contain resources and code related to launching the app and preparing to start the Flutter main view.
• Each platform needs specific assets to customize the app launch experience.

Where to Go From Here?

There are some handy packages that can help you generating the icons and spash screen for each platform. For app icons you can use flutter launcher icons. It will generate and organize the icons according to the platform.

Similarly, for splash screen you can use flutter native splash.

You may have seen other apps with more dynamic or animated splash screens. These are generally created as a whole-screen stateful widget that is displayed while the Flutter VM loads your main screen widget.

Now that you have a new branding for your app, you’re ready to deploy your app to the App Store and Google Play Store. That’s the topic of the next two chapters.