Let’s build the first Flutter App

Building the first Flutter App looks always challenging. Especially if we are beginners. Although, we have already learned a couple of necessary concepts in the Elementary Dart and Flutter Series.

So far we know that Flutter uses Dart Programming Language. In Flutter everything is Widget. In other words, everything is Class that defines the “Type” of an Object.

In Dart and Flutter, everything is Object.

We have also learned one more key concept. Dart and Flutter, both have the top-level function main() as the their entry point.

In main() the Flutter App starts its journey. After that, it builds the Widget tree. Flutter-Framework comes with hundreds and thousands Widgets which we can just place where they fit in the widget tree.

In most cases, we do not have to write any custom Widget. Not until the intermediate level.

How to write first Flutter App?

We are going to write our first Flutter App, as a beginner. Therefore, we should decide what we are going to write firstly. So let us name our first Flutter App – “How to be Reach”?

Secondly, we open the terminal and issue the command that creates the Flutter App.

flutter create how_to_be_reach

As a convention, we must use the “underscore”, “_” between the words when we create a fresh Flutter App.

By default, the Flutter-Framework creates a Counter App.

Let us remove all the code snippets and only keep this portion.

import 'package:flutter/material.dart';

main() {
  runApp(const App());
}

Here the App() will be our root Widget. Since this is our first Flutter App, we need to make it look simple, but elegant.

We will have an AppBar, and a Scaffold body. Both must have matching color.

Consequently, we need to change the background color property of both.

Let us see, how can we do that.

Besides that, we must have a common title. On the top of the Widget tree, we will use the “static” keyword to make it a class variable. Previously, we have learned, how we can do that.

However, just below the top Widget MaterialApp() we will pass the same title as instance variable through the named parameter.

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

  static const title = 'How to be Rich?';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: title,
      home: AppHomePage(
        title: title,
      ),
    );
  }
}

So this is our starting point.

In the Widget tree, we have only two Widgets so far. The MaterialApp and the AppHomePage().

In the AppHomePage() Widget we will use the Scaffold, AppBar and other Widgets.

Let us proceed.

What apps are made with Flutter?

We can build any kind of Android and iOS App with Flutter. Although for the beginners, who have no coding background, we keep it really simple.

In the Widget tree, we will keep the AppBar and the body section side by side.

Let us see our first Flutter App first.

We have made the AppBar back ground color deep orange. To match the color, we have made the body background color light orange.

Under the AppBar, we have three Widgets that are visible. On the top, there is a Text Widget. That works as the Headline.

Below the Text Widget, we have an Image Widget. Subsequently, below the Image Widget, we have another Text Widget that answers the question – “How to be Rich?”.

As we can see, every Widget is aligned centre. As a result, on the top of this body Widgets we need to use the Center Widget.

Let us see the further code. So that we can guess how the Widget tree works.

class AppHomePage extends StatelessWidget {
  const AppHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.orange[900],
      ),
      backgroundColor: Colors.orange[300],
      body:  Center(
        child: Column(
          children: [
            Text(
              'Simple',
              style: Theme.of(context).textTheme.headline3,
            ),
            const Image(
              image: AssetImage('images/dollar.jpg'),
              fit: BoxFit.cover,
            ),
            Text(
              'Do Your Job consistently. Money will come.',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        )
      ),
    );
  }
}

We can see the Scaffold Widget has used three properties. They are “appBar”, “backgroundColor”, and “body”.

The “appBar” property expects an AppBar Widget which again has two properties.

A common pattern in the Flutter-Framework

Each Widget has several properties that are passed as named parameters through the Widget, or Class constructor.

And each property expects another Widget. As a consequence, the Widget tree builds up.

That means every property has its own Widget tree.

appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.orange[900],
      ),

Right?

Exactly that happens in the Image Widget. It has several properties. But we have used two properties.

const Image(
              image: AssetImage('images/dollar.jpg'),
              fit: BoxFit.cover,
            ),

Hence the Widget tree almost looks like the following diagram.

The Widget tree starts from the MaterialApp. After that the Flutter-Framework starts building the Widget tree.

Just like a tree it spreads its branches with each branch again spreads more branches.

Now, we get the idea.

One of the key concept of the Flutter-Framework is the Flutter widget constructors use only named parameters. In other words we also call them properties of the Widget.

Some of the named parameters use the “required” keyword. That means the mandatory property expects either a Value or a Widget. And we have to provide that value.

In our next section we will take a look at those mandatory properties or named parameters.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter