Flutter: Hello World

Flutter Hello World App

Want to learn Flutter?

Then you are in the right place.

Because today I am going to show you how to write your first “Flutter: Hello World” app.  For this app, I am using both Stateless and Stateful widgets. If you don’t know about Stateless and Stateful widget don’t worry too much right now. Just sit tight, grab your keyboard, fire up the emulator and let’s do this!

Here are the things you will learn in this post:

  1. Displaying Hello World on the screen
  2. Hello World app using a Stateless widget
  3. Hello World app using a Stateful widget

Displaying Hello World on the screen

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!'
      ),
    ),
  );
}

In Flutter everything is composed of widgets. Your app is one huge widget which has many sub widgets all the way down. Widgets are like components with each component having different properties.

To run our Flutter app we need to call the function runApp which is composed of several child widgets we use in Flutter app. The runApp function takes the given Widget and makes it the root of the widget tree. Flutter uses the concept of nested widgets. As you can see our widget tree consists of two widgets,  Center widget and its child, the widget Text.

The Center widget tells Flutter to center align everything which is passed inside the Center widget which means the text “Hello, world” ends up centered on the screen.

The other statement “import ‘package:flutter/material.dart’;” is simply a package which consists of various google material components which we use in our Flutter app.

Flutter Hello World

Hello World app using a Stateless widget

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'Hello World App',
      home: new myApp(),
    )
  );
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hello World App'),
      ),
      body: new Center(
        child: new Text(
          'Hello, world!'
        ),
      ),
    );
  }
}

A Flutter widget can either be a StatelessWidget or a StatefulWidget. A StatelessWidget is a widget which doesn’t have any State meaning it doesn’t store any data or react to any data changes, it’s like a static widget.

In our case, we are passing a MaterialApp widget in runApp function with two properties ‘title’ and ‘home’. title contains the name of your app and home contains the class name which extends StatelessWidget. The documentation of MaterialApp tells us that at least home, routes, onGenerateRoute or builder must be initialized. We will only define home property here. It will be the home screen of our application because we want our application to be a basic Material Design layout.

A widget’s main job is to implement a build function. A build function returns an Widget instance. We are returning widget Scaffold in our build function. Scaffold Implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

In our Scaffold widget, we are using appBar and body property. appBar property places the app bar as a fixed-height widget at the top of the screen.

The body property contains body of our Flutter app with Center and child Text widget which displays “Hello, world!”.

Flutter StatelessWidget

Hello World app using a Stateful widget

import 'package:flutter/material.dart';

void main(){
  runApp(
    new MaterialApp(
      title: 'Hello World App',
      home: new myApp(),
    )
  );
}

class myApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<myApp>{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hello World App'),
      ),
      body: new Center(
        child: new Text(
          'Hello, world!'
        ),
      ),
    );
  }
}

A StatefulWidget has an object State associated with it, which allows it not only to store data but also to react to changes in the data. A stateful widget is useful when you want the part in the user interface to change dynamically.

StatefulWidget instances are immutable(whose state cannot be modified after it is created) and store their mutable state either in separate State objects that are created by the createState method. The Flutter framework calls createState to inflate our StatefulWidget.

To keep our app simpler we are not doing any State changes in this tutorial. In our case, we are creating class myApp which extends StatefulWidget and then we are using createState function to create our _HelloWorldState. You can name your state anything you want just like we did here.

Note: Flutter uses Dart language. Unlike Java, Dart doesn’t have the keywords public, protected, and private. If an identifier starts with an underscore _, it’s private to its library.

Flutter StatefulWidget

Conclusion

In this tutorial, you learned how to use Flutter and Dart, to create a simple app Hello World app for Android. You also know about StatelessWidget, StatefulWidget, State object, Center, Text, and Scaffold widget.

All the source code of this project is available in my Flutter Tutorials Github repo.

If you liked this tutorial, and have questions feel free to let me know by leaving a comment below right now.

Leave a Reply

Your email address will not be published. Required fields are marked *