Flutter is a modern UI toolkit used to build applications for mobile, web, and desktop from a single codebase. It focuses on creating fast and visually consistent user interfaces.

In Flutter, everything on the screen is a widget that defines how the UI appears and behaves.
Flutter provides many predefined widgets that help developers quickly build application interfaces.
Developers can combine these widgets to create custom widgets and build complex layouts easily.

In Flutter there are three types of widgets:

This guide demonstrates how to build a simple Hello World Flutter application using the StatelessWidget, MaterialApp, Center, and Text widgets.

A Stateless Widget represents a widget whose state does not change during its lifetime. Once it is created, its appearance remains fixed unless a new instance of the widget is rebuilt.

Stateless widgets contain a build() method that describes how the UI should appear.
The build() method draws the UI components on the screen based on the widget configuration.

@override
Widget build(BuildContext context) {
  return Widget();
}

The build() method receives a BuildContext parameter that provides information about where the widget is located in the widget tree.

MaterialApp

MaterialApp is a predefined widget provided by Flutter that implements the Material Design system. It serves as the root of many Flutter applications.

It provides several properties such as:

home: Specifies the main screen of the application.
debugShowCheckedModeBanner: Removes the debug banner.
theme: Defines application styling.

MaterialApp(
  home: Widget(),
)

The widget provided in the home property becomes the default screen of the app.

Center is also a predefined widget by the Flutter Team, which takes another widget in its child argument.

Using Center Widget, will display Widget in its child argument in Center.
It accepts a child widget through the child property.

Center(
  child: Widget(),
)

Any widget placed inside the child property will appear in the center of its parent.

The Text widget is used to display text on the screen. It is one of the most commonly used widgets in Flutter applications.

Text('Hello World')

The string passed inside the widget is displayed on the screen.

Implementation

Below is a simple Flutter application that displays Hello World at the center of the screen.

main.dart

Dart

import 'package:flutter/material.dart';

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

class GeeksForGeeks extends StatelessWidget {
  const GeeksForGeeks({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Center(child: Text('Hello World')),
    );
  }
}

import 'package:flutter/material.dart': This line imports the Flutter Material library, which includes widgets such as StatelessWidget, MaterialApp, Center, and Text.
main() Function: The main() function is the starting point of every Flutter application. It calls runApp() to launch the app.
runApp(): This function takes a widget and makes it the root of the widget tree.
GeeksForGeeks Class: This is a custom class that extends StatelessWidget. It defines the structure of the application UI.
build() Method: The build() method describes how the UI should appear on the screen. It returns a MaterialApp widget containing a centered Text widget.

Output:

Adding Material Design to the App

The previous app only displays text. To make it look like a modern application, Flutter provides the Scaffold widget, which gives a basic app structure including an AppBar, body, and more.

Updated main.dart

Dart

import 'package:flutter/material.dart';

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

class GeeksForGeeks extends StatelessWidget {
  const GeeksForGeeks({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Material App
    return MaterialApp(

        // Scaffold Widget
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
            title: const Text('GFG'),
          ),
          body: const Center(child: Text('Hello World')),
        ));
  }
}

Output:

The Material library is imported to access Flutter’s built-in UI widgets, and the main() function starts the execution of the application.
The GeeksForGeeks class extends StatelessWidget and serves as the root widget of the app, while the build() method returns a MaterialApp widget.
The MaterialApp uses the home property to define the main screen, which contains a Scaffold widget providing the basic layout of the app.
The AppBar widget creates a top navigation bar displaying the title "GFG".
The body contains a Center widget that aligns its child in the middle, and the Text widget displays the message "Hello World".

Creating a Hello World App Using Flutter

Stateless Widget

MaterialApp

Center Widget

Text Widget

Implementation

Adding Material Design to the App

Explore