Flutter for Beginners: Hello World!

This article shows how to create a simple hello world with Flutter, add a MaterialApp widget, and Scaffold with appBar.

Welcome back to Flutter for Beginner series! This article is the second part of the series.


Contents


In the previous article, we learn how to start our first Flutter project. Now, let's create our first text and display a 'Hello World' on the screen.

Before we started coding, let's see the folder structure that we generated using flutter create my_first_app command.

Flutter folder structure.

As you can see, there are several folders generated by the command, the most common folder that we often use is the lib folder. Most of our code will be placed inside that folder. The command also generates a file called main.dart which is the starting point of our Flutter project.  If you see into that file, it already contains an example code for the counter app, including a stateful widget, a counter state, and a floating action button (we will discuss more on those things in separate articles).

For now, let's replace the main.dart to be like this:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text(
      "Hello World",
      textDirection: TextDirection.ltr,
    ));
  }
}

In the code above, we use Text widget to display our "Hello World".  The Text widget accepts two parameters, the text itself and the textDirection which in this case is left to right text direction. If you wrap everything with the MaterialApp widget, the textDirection will be optional and defaulted to ltr.

Let's run the app with flutter run command, this is how it looks.

Hello world app

Diving into the code

If you are completely no clue how the code works let's discuss that. The main method as you see in the code above is the entry point (root) of our app. Whenever we run the app, it will look for this method first, and run the code inside the method.

void main() {
  runApp(const MyApp());
}

The runApp function inflate the given widget into the screen. In this case, the MyApp widget is the widget that we provide for the function. MyApp is a stateless widget that extends an abstract class called StatelessWidget, which means this widget doesn't support state (we will discuss the stateless widget and stateful widget in the following article).

To define how the widget looks, we need to provide a function called build , the build function returns another widget to be displayed on the screen. In the code above, it returns a widget called Center which has another widget as a child called Text. It means the text will be centered on the screen.

Using the MaterialApp widget

MaterialApp is a class in the Flutter framework that is used to set up and configure the basic structure of a Flutter application following the Material Design guidelines. It serves as the root widget of a Flutter app and provides several properties and configurations to customize the behavior and appearance of the app.

It allows you to use features such as Theme, Routing and Navigation, Localization, Error handling, and debugging. You will need to use the MaterialApp widget in most Flutter projects you created. To use it, you just need to wrap the Center widget that we created before:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Center(
          child: Text(
        "Hello World",
      )),
    );
  }
}

As you can see, in the code above we don't need to define the textDirection anymore as it defaulted to ltr when we use the MaterialApp. You will also notice that, unlike most widgets that use child  or children parameter to define its child/children,  the MaterialApp use home parameter. That's mean, the widget you provided as the parameter will be the home screen of the app.

This is how the app looks now:

Using the scaffold widget

The Scaffold widget is a fundamental component in the Flutter framework that provides a basic layout structure for a typical mobile application screen. It implements the Material Design layout guidelines and serves as a container for various other widgets, such as an app bar, navigation drawer, floating action button, and more. Scaffold acts as a convenient starting point for creating app screens with common UI elements and functionalities.

In short, you usually need the Scaffold widget every time you want to create a UI screen. Let's update the code above to like the following:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Hello Title"),
        ),
        body: const Center(
            child: Text(
          "Hello World",
          textDirection: TextDirection.ltr,
        )),
      ),
    );
  }

As you can see, we now use Scaffold widget as our home screen. As a screen, the scaffold widget could consist of a header (appBar), a body, and a footer (bottomNavigationBar). In this example, we only provide the appBar and the body. Let's see how it looks!

Great! now you created the basic hello world app!

Conclusion

Hopefully, the explanation above will be the entrance for you to enter the exciting Flutter world. In the next article, we will learn about StatelessWidget and StatefulWidget.