A Hello World App using Flutter

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. 

Material App

It is also a widget provided by Flutter Team, which follows Google Material Design Scheme, Material App 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 Material App 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

filter_none

edit
close

play_arrow

link
brightness_4
code

Center(
    child: Widget(
    ),
),

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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')
      ),
    );
  }
}

chevron_right


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:

hello world in flutter

It does not look like a Modern App, Let us add material design!

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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'
        ),
      )
    );
  }
}

chevron_right


Output:

hello world in flutter




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.