Let's Create Hello World App with Flutter

Hey Readers,

As the universal law of the programmers suggests every language learning should be started with printing the Hello World! 😎. Set let's build our hello world app which displays the hello world at the centre of the screen.

Code for Hello World app

So let's discuss our code for the hello world app. So at first, we are importing the package flutter/material.dart which provides us with the Material app widget which helps in printing the Text at the centre of the App.

import 'package:flutter/material.dart';

Next up we have the Main function which used for code execution that is when we run the code the this the main class which is going to run when we build the app.

import 'package:flutter/material.dart';

void main(){

}

Inside the main class, we have runApp function Inflate the given widget and attach it to the screen. This function applies all the widgets used is to the screen.

import 'package:flutter/material.dart';

void main(){
runApp();
}

MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality.

import 'package:flutter/material.dart';

void main(){
    runApp(MaterialApp(),
    );
}

inside the MaterialApp we have a property called home which is used to build the screen

if we want to show the text on the screen then we have to add the property as Text("Hello") to show that this is a string data type.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(
    MaterialApp(
      // Center widget used to center the text
      home: Text("Hello"),
    ),
  );
}

As you can we have finally got to display Hello world in Phone now let's try to display the text at the centre of the screen for that we have to use a property called Center inside the home.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(
    MaterialApp(
      // Center widget used to center the text
      home: Center(
        child: Text("Hello"),
      ),
    ),
  );
}

As we finally have the text in the centre of the screen so now we can say that we have started learning Flutter as we have done our ritual of printing the Hello World.

Code in a more elegant way

As you can see if we code like this which will be challenging to manage in future when more and more code gets added then now let's try to make it easier to read and maintain.

There is one more method to write the code which does the same work of printing the Hello World at the centre of the screen which is written in a more descriptive way.

import 'package:flutter/material.dart';

//Main is the function which is run when run is performed
void main() {
  //Function is used to build the app
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Text("hello"),
      ),
    );
  }
}

As you can see here now we moving all code written to the display the text at the centre of the screen is moved to another class called MainApp and instantiated inside the runApp method which going to be called when we build the app.

Inside the MainApp class, we have a method called build which returns the Widget type of data (Similar to int, double, String that we know). since we are returning some data then we definitely need a return statement which returns the widget type data.

So we are returning the MaterialApp widget with the properties which are used to print the text at the centre of the screen as you have seen in the previous code.

As the result, you see that this code is easier to read and understand compared to the code which we have previously written. So in future let's follow this format and write simple and elegant code

Thank You

Thank you all who made it to the end of the blog. If you found this blog somewhat useful, please leave a like or something, or if you found any mistakes then you should definitely leave a comment pointing the mistake I will definitely make those mistakes repaired so no one has to read any incorrect information.

안녕 🙏👋