Hello Flutter App

In this section, we'll build our first Flutter application for an Android platform. We will create a simple Hello Flutter app to get the basic understanding of Flutter app development. This app will display a greetings text in the center of the device's screen. In this first lesson, we establish our goals for creating the Flutter app.

We'll cover the following

Hello Flutter app

By end of this section, you’ll have a Flutter app for the Android platform displaying a greeting message in two languages.

This app will display text in English and Spanish. The greeting message can be toggled by clicking on the “refresh” icon in the top-right corner.

The displayed text will be centered in the middle of the screen.

Learning goals

By the end of this section, you’ll have a basic understanding of Flutter app development. We’ll cover the following topics:

  1. App’s entry point
  2. MaterialApp widget: the root widget for the app
  3. Center widget: centers the content in the middle of the device screen
  4. Scaffold widget: provides scaffolding to the app
  5. SafeArea widget: helps to avoid operating system notifications overlapping with app’s widgets
  6. AppBar widget: title, leading and actions
  7. Type of widgets: stateless vs stateful
  8. Adding an icon button to toggle text in between English and Spanish

We’ll build the “Hello Flutter App” in many iterations to understand each building block step by step. Our final app will look like as below:

Hello Flutter App: Clicking on refresh the icon changes greeting to Spanish.
Hello Flutter App: Clicking on refresh the icon changes greeting to Spanish.

In the next lesson, we’ll work on creating a Flutter app to render “Hello Flutter !” text in the center of the device’s screen.