Big Flap

The Interface

The build method starting in line 117 creates the app interface. Line 118 returns a Scaffold for this to nest the widgets inside each other. Line 119 in the body area inserts a ListView that wraps around all the remaining widgets and that bundles all the child widgets with the children parameter and arranges them.

The various SizedBox widgets specify the spacing between text widgets. In this example, it inserts 10 pixels vertically between each of the text widgets that display the weather data. Here, the Row container widget arranges two text widgets (one with the weather property and one that displays the associated value) in horizontal alignment in each row. The MainAxisAlignment.start property ensures that the child widget is left-justified.

Line 141 declares the button with the Display Weather label. A SizedBox ensures that the button covers the entire width of the display, which requires a width property with a value of double.infinity. The button assumes the size of the parent – in this case, the SizedBox. The second property, height, sets the height. The button is created as a child widget of the SizedBox in the usual way. As you already know, onPressed calls the previously described _displayWeather function. The button's label specifies a text widget at the end.

Last but not least, line 143 creates the FloatingActionButton mentioned earlier in the bottom right corner of the app. Clicking on it causes the app to run the _showApiKeyInputDialog function. The icon property sets an icon that decorates the button – in this particular case, a plus sign. As you might expect, label specifies the button's label. Finally, tooltip defines a string that appears when you mouse over the button.

Emulator

You can either test the app you created directly with a cell phone or use the Android virtual device (AVD) emulator in Android Studio that imitates a physical smartphone. To do this, call Tools | AVD Manager . In the window that opens, create a new virtual device at bottom left by clicking Create Virtual Device . The virtual device can then be selected from the drop-down menu at top right. To start the app there, click the green arrow next to it. More information can be found on the Android Studio website [8].

Deployment

If the app you programmed runs as desired, you can generate an APK file in Android Studio with Build | Flutter | Build APK , which you will find in the build/app/outputs/flutter-apk/ folder. An APK file is an installation file that you can transfer to an Android smartphone and install there.

However, before you compile the weather app example as an APK file for Android, you need to add the <uses-permission line to the AndroidManifest.xml file as shown in Listing 4. You will find it in the android/app/src/main/ directory. This step will give the app on the Android smartphone the Internet access permissions it needs to retrieve weather data from OpenWeatherMap. You can omit this step for apps that do not require Internet access (iOS apps do not need this entry either).

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.weather_app">
  <uses-permission android:name="android.permission.INTERNET"/>
  <application [...]