Hello Guys, This tutorial is mainly for Flutter beginners but even if you are a Pro developer this could help you to understand some Flutter basics. In this tutorial we would modify the flutter first app code into a simple one and explained step by step each line of code. We would make sure that you understand the whole code because it is the base of every single Flutter app. So let’s get started :). See the below code i have posted my whole main.dart file code here below first then i am going to start explaining them. Just copy and paste the below code in your own main.dart file to see the first time effect.
Source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('My First App'), ), body: Text('My First Home Page'), ), ); } } |
Explanation of above code in simplest form:
1. Every time when we start our new flutter code there is one step compulsory to import the material.dart package in your application. This package contains some of Flutter basic widgets like Text, AppBar, runApp() etc. One more thing you should close each line with semi-column like i did here.
|
1 |
import 'package:flutter/material.dart'; |
2. On next step we would call our Main widget class using void main function. Void main function is the main function defined in Flutter, which executes every single time when a application reloads. Here we can use its runApp() function which tells the compiler to execute the pass class. Just like here we have pass our MyApp class in it. So every time when application loads it would call the MyApp class. This syntax supports one line function execution. runApp() function takes widget pass in it and draw the widget on the mobile screen.
|
1 |
void main() => runApp(MyApp()); |
You can also call the runApp() function using by passing it completely in main function like below code. Both syntax is correct bat it depends on your requirement.
|
1 2 3 4 5 |
void main() { runApp(MyApp()); } |
3. Creating Class MyApp extends with StatelessWidget. Every single widget in Flutter must extends Stateless Widget or State full widget.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. StatelessWidget and StatefullWidget has its own build method which flutter calls every time when we want to draw something on screen. build method always returns a new Widget which app should draw on screen. Here context is a type of object type of BuildContext. You don’t need to worry about its value. Flutter will automatically assign value to it.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { } } |
5. On next step we would return the base widget using MaterialApp. It supports an argument so we give it home. Here we would create the base widget named as Scaffold. Scaffold is a inbuilt widget in material.dart class. This class would give you a proper basic UI which looks like a application page.
- appBar : We would pass the AppBar class here to make simple sky blue color Appbar.
- body : In body section we would pass the widget which we want to show inside the application. Here we are showing the only the Text widget.
|
1 2 3 4 5 6 |
home: Scaffold( appBar: AppBar( title: Text('My First App'), ), body: Text('My First Home Page'), ), |
Screenshot of App:
