Chapters
Chapters

Chapters

Hide chapters

Flutter Apprentice

Fourth Edition · Flutter 3.16.9 · Dart 3.2.6 · Android Studio 2023.1.1

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Build Your First Flutter App

Section 1: 2 chapters
Show chapters Hide chapters

Section II: Everything’s a Widget

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Navigating Between Screens

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence & State

Section 4: 6 chapters
Show chapters Hide chapters

Section V: Working With Firebase Cloud Firestore

Section 5: 1 chapter
Show chapters Hide chapters

Section VI: Testing Your Flutter App

Section 6: 2 chapters
Show chapters Hide chapters

Section VII: Deployment

Section 7: 4 chapters
Show chapters Hide chapters

19. Platform-Specific App Assets
Written by Stef Patterson

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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.

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.

Naming Your App

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

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.

Setup macOS Icons

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

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.

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.

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 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.

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.

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.

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.

<title>Recipe Finder</title>

 <title>Recipe 🔎</title>

'Recipe 🔎'

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.

18. Widget Testing
20. Build & Release an Android App
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now