Your First Flutter App: Polishing the App

We have our app icons in place but you’ll notice when we start our app, we get a simple white screen. This doesn’t look very good at all. A nice thing to add is a launch screen. A launch screen can show a logo or even a picture of your user interface on startup to make your app appear to launch faster.

Naturally, we have two different methods for adding launch screens. With iOS, we use what is known as a launch storyboard. The launch storyboard is a representation of a screen that we can assets like images. We use constraints to align the assets. Using constraints are well beyond the scope of this course. With Android, we write our code in file called launch background. Here were build our layout in xml which again is beyond the scope of this course.

Let’s add a couple of launch screens

To get started open your project in progress or download the starter project for this episode. We’ll start with iOS first. Open up the Xcode workspace project. Once it is open, open up the Assets file. This is where we put all our images in iOS.

Now, create a new image set by clicking the plus sign at the bottom of the column. Give it the name, Logo. From the resource folder, drag the logos to the appropriate squares. The @x in the title name indicates the resolution. Next, create a new image set and call it Background. Drag in the background image to the 1x square.

Okay, now to layout our launch screen. Select the Launch screen file. Press the plus sign to add an image. The plus sign is on the left side of the column on the right. If the column isn’t there, then it’s on the right hand side. Click the plus sign and search for image view. Drag it on the device. Now expand the image view to take up all the space.

In the right hand column, select the fifth tab otherwise known as the attributes inspector. In the image property, set the image to a background. For the Content Mode, set it to Aspect fit.

It looks good but we need to constrain it. On the right hand side of the status bar, click the third icon. This adds constraints. At the top of the dialog, click all the red constraints then press the add 4 constraints button. Great work! That’s one image. Now for the next one.

Create a new image view and drag it to the center of the screen. In the attributes inspector, set the image to Logo. Then set the content mode to aspect fit. Now comes the constraints. Set the width to 240 and the height to 186. Next, right click and drag on the image. Holding shift, select both the width and aspect ratio constraint. Finally on the status bar, click the bar graph icon - second to the left. Select the Horizontally in Container and Vertical in Container. Then click the add constraints button.

Now you can preview the launch screen on different devices by pressing the device preview button and selecting a device.

Now, we can test it. First we need to launch a simulator. Click Xcode, Open Developer Tool and then Simulator. Switch back Visual Studio code and then click the simulator from the status bar. Close Xcode. Then build and run the app. It will take a few moments, after which, you’ll see our awesome new launch screen.

For Android, we do things a little different. First, open up the android folder. First from the resources folder, copy the images from the resources folder to the corresponding android image folder.

Next, open the drawable.xml and write the following XML.

<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/rwdevcon_bg" />
</item>

<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/razewarelogo_128" />
</item>

Open up launch_background.xml in the drawable-v21. Copy the XML into that folder. And that’s it. Build and run on the android emulator. Now you have a launch screen for Android all set up.