Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, Web(beta), and desktop(technical preview) from a single codebase written in Dart Language. In this article, I will provide line by line explanation on how to build a simple Hello World App using Flutter.
In Flutter everything is a Widget and using predefined widgets one can create user-defined widgets just like using int, float, double we can create user-defined data type. In Flutter there are three types of widgets
- Stateless Widget
- Stateful Widget
- Inherited Widget
In this article, we will use Stateless Widget, Material App, Center and Text Widget
Stateless Widget
In Flutter Stateless Widget are the widgets that can not change their state, that is in Stateless Widget there is a method(function) called as build which is responsible for drawing components on the screen is called only once. To redraw a stateless widget one has to create a new instance of the stateless widget.
MaterialApp
It is also a widget provided by Flutter Team, which follows Google Material Design Scheme, MaterialApp is a class which has various named arguments like home: in which we pass the widget that has to be displayed on Home Screen of an App. To read more about MaterialApp check out Flutter Documentation
Center Widget
Center is also a predefined widget by Flutter Team, which takes another widget in its child argument. Using Center Widget as the name suggest it will display Widget in its child argument in Center
Dart
Center( child: Widget( ),), |
Text Widget
The text widget is also predefined by Flutter Team, which is used to display text. Let us now build a Hello World App using Flutter
Dart
import 'package:flutter/material.dart';void main() { runApp(GeeksForGeeks());}class GeeksForGeeks extends StatelessWidget{ Widget build(BuildContext context){ return MaterialApp( home: Center( child: Text('Hello World') ), ); }} |
import 'package:flutter/material.dart';
Here we are importing the package which has a definition for Stateless Widget, Center, Text, Material App, and many more. It is like #include<iostream> in C++ program
GeeksForGeeks: It is a user Defined class which inherits Stateless Widget, that is all the property of Stateless Widget is in GeeksForGeeks
Build: It is a method which is responsible for drawing components on the Screen it takes a BuildContext as an argument which has information about which widget has to be displayed and in which order it has to be painted on the screen.
Output:
It does not look like a Modern App, Let us add material design!
Dart
import 'package:flutter/material.dart';void main() { runApp(GeeksForGeeks());}class GeeksForGeeks extends StatelessWidget{ Widget build(BuildContext context){ // Material App return MaterialApp( // Scaffold Widget home: Scaffold( appBar: AppBar( // AppBar takes a Text Widget // in it's title parameter title: Text('GFG'), ), body: Center( child: Text('Hello World') ), ) ); }} |
Output:
Explanation: In the first line we have imported the material design library which will be used in this app. Then we have our main function. This is the point where the code execution will start. Then we have the class ‘GeeksForGeeks’ which is extending the StatelessWidget. This is basically the main widget tree of our ‘hello world’ app. All this is followed by the build method, which is returning a MaterialApp widget. Then we have employed home property of the MaterialApp, which in turn is holding the Scaffold widget. The Scaffold widget is containing the whole screen of the app. We have used the appBar property which is taking the AppBar widget as the object. And in turn the AppBar widget is holding ‘GFG’ as the title. Then we have the body, which is again the property of the MaterialApp. Center is the object of the body and it’s child is Text widget which reads ‘Hello World’.
