Flutter First Project From Scratch

When you create a new flutter project you get a boilerplate code in your main.dart file as the image below. Due to lot of new code there it’s difficult to understand for a new comer to understand the concept behind each line.

In this article I’m going to explain how to write your first project from scratch. Remove everything from main.dart file and let’s get to coding line by line.

First of all you need to import material.dart library where the material design is written. It provides you some widgets and functionatilies you are going to use later.

import 'package:flutter/material.dart';

Next you need to create your main method which is the first method to execute when the project starts to run

void main() {
}

In here you have to tell the application what is the root widget of the widget tree. We can do so by using a function called runApp() and also we have to pass a widget to the app too.

void main() {
    runApp(FirstApp());
}

In here I have passed an instance called FirstApp which we will define now. There are two ways that we can create widgets in flutter those are Stateless and Stateful. By inheriting stateless or stateful class we can make our class a widget. For the root widget we will create a stateless widget.

class FirstApp extends StatelessWidget{
}

When you create a stateless widget first thing you have to do is override the build method. This is how you can do it,

class FirstApp extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        return MaterialApp();
    }
}

As you can see here the build method should return a widget. Since this is the root widget we will be returning a special widget called MaterialApp(). The MaterialApp class provides the material design pattern which is a design pattern created by Google. By using this MaterialApp widget we can provide a theme, color, title to our app.

class FirstApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: "My First Project",
            home: HomePage(),
        );
    }
}

As you can see in the code I have given a title and declare home property of the materialapp which tells the app what is the first widget to load.

Now let’s declare our HomePage widget,

I will create another stateless widget to create the HomePage.

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

Since this widget should be the home page we will return a special widget called Scaffold from the build method. Scaffold is a special widget in flutetr it provides the structure of the page. By using Scaffold you can define header, body and footer section of the page. It has lot of other features too. Please read the manual for more info about scaffold class.

class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold();
    }
}

Finally we need to define the header and the body of our page. To define this I will use AppBar and body properties of the scaffold class.

class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('My First App')),
            body: Container(),
        );
    }
} 

By passing AppBar object with title I have declare the header section of the app. For the body I have given a Container widget which is a transparent box shape.

All done, Now run your project (By pressing F5) and you should see the app like below.

Final output

Congratulations, You have created your first flutter project.

As a co-instructor for Flutter and Dart at Proacademy I have taught many students how to develop mobile applications. In this article serious I’m going to explain some dart and flutter concepts.