This guide will give you idea about the how to learn flutter development by building application. These application ideas are based on my experience.

I am doing flutter development for more than 2 years. I has been Native app developer since last 5 years.

If you are instructor then you should follow this kind of methodology to teach students.

Inspiration #

Some week ago I was teaching my brother flutter and after teaching for one hour he asks. What can I make using this much knowledge? I say nothing.

I teach one more hour then again he ask. What can I make using this much knowledge? I say nothing.

You need to have patience real application have lots of things and it can be build after learn for at least two weeks. He said it’s too long!

So, I decided to design a roadmap in which you will learn fundamentals and as well as you will also make app using those fundamentals.

You must have knowledge of Dart before you jump to the flutter.

Flutter Basics #

Before you start development of these apps make sure you have knowledge of Flutter basics.

• runApp
• MaterialApp
• Scaffold
  • appBar
  • body
• Stateless

App Idea #

If you make any of these and want to contribute then you can comment Github Repo URL of the app in comment and I’ll include that in the resource column.

I am Rich #

To build this app you need to have knowledge of two things.

• Text
• Image

This app will show one image and some text in Appbar

Authentication UI #

In this app we will build a real UI which we see in most of the app i.e. Login Screen.

• Input Field
• Button

versions 2

In register page we have one Login button for the user who already have account account. When we will click on that button and it will open Login Page.

• Navigation

Square Calculator #

This app will be having widget

• InputField
• Text

• Method/Function (Dart)
• paring String to integer (Dart)

When you click on the Input field it will open the Keyboard for entering the number. When you enter some text, it will calculate the square the entered value and print in the console.

Once you are able to calculate the square of entered number then try to update that value in the UI.

Here you will learn about something new which is stateful

Age Calculator #

This app will calculate the age of the user. This will be done based on the user date of birth.

• Date Input

We will build application which will have input field which will ask for the date. Once users select the date of birth we will give them his age based on todays date.

BMI #

I hope you all are aware about the BMI calculator. BMI stands Body Mass Index and it tell us if we are skinny/normal/fat.

It index our body based on two of our properties.

• Height
• Weight

BMI.dart

/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI(double height, double weight){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

Version 2 of this app

Show the result of of BMI in other page. In this way you can learn two more new things.

• Page Routing
• Sending data from one to other page.

Simple Calculator #

This app will do all the four mathematics operation

• Add
• Subtract
• Product
• Division

You will learn about TextInputController while building this app.

In this app we will have two input field, and four buttons(each button have one mathematics operation bind to it).

It’s not required but Try to use switch case here if could

Todo #

You must have knowledge of all these things in order to build this app.

• Floating Action Button
• Modal popup
• List View using for loops/ ListView.builder

This apps keeps record all all the work which we have to do. We click on button and it open and modal pop up which is asking for the task. As soon as we press okay on keyboard after entering the task. It add to the array which contains all the tasks.

List view will show the value which is being stored in the array.

Version 2 of this app

You will use Dismissible and which will remove the item from the array.

We will make a more powerful todo list after learning about some more widget.