Flutter Project Structure

In this lesson, we’ll dive into the Dart code for the Hello Flutter app.

As discussed in the last lesson, the Educative platform provides the in-built environment to create a Flutter project. So, we are all set to start some coding!

Let’s dive in and start coding the Hello Flutter app right away.

Hello Flutter App

Our app name is HelloFlutterApp. This extends a Flutter widget StatelessWidget. We’ll go over types of widgets in later lessons.

class HelloFlutterApp extends StatelessWidget {
  ...
}

Flutter widgets implement material design.

Material design

Material design is the design language developed by Google to better unite fundamental design principles with technology.

Material design has three core principles:

• On-screen elements are the metaphor of the off-screen elements. User experience enhances when UI appears similar to real-world objects.

• The material design puts emphasis on having a design that makes sense, is easy to follow (bold colors, headlines), and is uncluttered (negative space).

• Material design uses motion to provide feedback. When you hold down on an icon, it pops out a bit to tell you that it’s ready to be moved.

Using material design

To use material design, you need to import the material.dart package to access StatelessWidget and other material widgets.

import 'package:flutter/material.dart';

Building the interface

Next, we need to tell the HelloFlutterApp widget how to build itself inside the build(BuildContext context) method.

class HelloFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ...
  }
}

The MaterialApp widget

The MaterialApp widget requires home property to be specified. The home property declares which widget will be displayed first when the app launches.

MaterialApp(
      home: //,
)

The Center widget

We want to show the greeting message in the center of the screen. So, we use the Center widget as home. Its child is the Text widget.

Center(
        child: Text("Hello Flutter !"),
      ),

The build() method

At this point, the build() method will return the MaterialApp widget with a centered text string in it. HelloFlutterApp class will look like below:

class HelloFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Text("Hello Flutter !"),
      ),
    );
  }
}