Home Flutter Books Flutter Apprentice

16
Platform Specific App Assets Written by Michael Katz

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

So far, you’ve built Flutter apps for the Flutter toolkit 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. It’s almost magical.

However, sometimes you’ll need to add platform-specific code to cater to the needs of the particular store or operating system.

For example, you might 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. You’ll continue using the Recipe Finder app from the previous section.

Note: You can also start fresh by opening this chapter’s starter project. If you choose to do this, remember to click the Get dependencies button or execute flutter pub get from Terminal. You’ll also need to add your API Key and ID in lib/network/recipe_service.dart.

You’ll want to use native development tools when working with platform-specific assets, so you’ll need to install Xcode 12 to complete this chapter. Once that’s done, begin by opening the chapter’s starter project.

Setting the app icon

The app icon is one of the most important pieces of any app’s branding. It’s what shows up on the store page and the home screen as well as in notifications and settings. It’s the avatar for the app, so it must look just right.

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 with the flutter tool, 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. Your first task will be to update to a custom image that looks great on each platform.

Optimizing the app icon for Android

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

android:icon="@mipmap/ic_launcher"

Personalizing the app icon for Android

When you work with your own custom artwork, there are a few more steps you need to take, beyond just copying and pasting from a folder. You need to work in the Android portion of your app and not within the Flutter project.

Optimizing the app icon for iOS

When you create a Flutter project that supports iOS, Flutter generates an ios subfolder in the project at the same level as the android folder. This contains the libraries and support files to run on iOS. In that folder 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 in a configuration-aware way.

Setting the app’s name

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

Recipe 🔎

Adding a launch screen

The next finishing touch you’ll put on your app is a launch screen. It takes a few moments for the Dart VM to spin up when users launch the app, so you’ll add polish by giving them something to look at other than a white screen. Once again, you need to set this up separately for iOS and Android.

Setting a launch image in iOS

On iOS, setting a launch image is straightforward.

Showing a more sophisticated launch UI

A good image can go a long way toward making your app look sophisticated. However, the one you just used is problematic because the built-in text is hard to get right across a wide variety of device sizes and resolutions. This adds a layer of complexity to the translation.

Adding constraints

Your first step is to make the image fill the screen without distorting its contents. That will make it look good on all device sizes.

Replacing the title with a label

It’s not ideal to have text attached to the image, so you’ll replace it with a label that has its own constraints, instead. To do that, you’ll need a new image.

Setting a launch image in Android

Setting a launch image is less user-friendly on Android. In Android Studio, navigate in the Project browser to android/app/src/main/res/drawable/ and open launch_background.xml.

<item>
  <bitmap
    android:gravity="fill"
    android:src="@drawable/splash" />
</item>

Using Android’s two-phase launch

The app goes through two phases when it launches. The first is app launch, which occurs between when the user taps the launcher icon and when the app code starts to execute. The second is between that point and when Flutter renders the first frame of the main activity. For each of these phases, you can supply different drawable assets for the launch screens.

android:theme="@style/LaunchTheme"

<meta-data
  android:name="io.flutter.embedding.android.SplashScreenDrawable"
  android:resource="@drawable/launch_background"
  />

Key points

  • Flutter generates app projects for iOS and Android, which you can edit to brand your app.
  • These projects contain resources and code related to launching the app and preparing to start the Flutter main view.
  • You need to set assets related to app launch separately for each platform.

Where to go from here?

You may have seen other apps with more dynamic or animated splash screens. These are generally created as a whole-screen stateful widget that displays for a predetermined time between the Flutter VM load and launching your main screen widget.

17. Build & Release an Android App 15. Saving Data With SQLite

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.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99