Flutter hello world program fully explained [closed]

Question

Explain each line of this code. This is a normal hello world code in flutter.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } }

class MyHomePage extends StatefulWidget { const MyHomePage({ Key? key }) : super(key: key);

@override State<MyHomePage> createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Container( child: Text("Hello World"), ); } }

Answer 1

import 'package:flutter/material.dart';

This line to import the various objects that your going to use in your app such as buttons. In other words, think of fixing an electrical device, the first step is to prepare the tools needed such as screw driver or might be a hammer. so this line basically used to bring all required objects that you would use to create an app.

void main() => runApp(MyApp());

This is the start point of your app, when you press play button in your debugger or run the app on your phone, the compiler would try to find this line main() and read what to do with this app, in this case the main function tells the compiler to run the app (runApp) which is (MyApp), in other words MyApp class would be the first thing the user sees, while main is the first thing the compiler look for.

class MyApp extends StatelessWidget { 

This our MyApp which we called earlier, what is MyApp ? MyApp is a class, or we can call as a blueprint which is going to contain what we need to show in the app, so what is this class ? this is a StatlessWidget. so in other words, the class MyApp is a copy of StatlessWidget (which is defined in material.dart).

const MyApp({Key? key}) : super(key: key);

This is the initializer of our class, here it tells what it takes when it is called, and this is an optional line, you do not have to specify the property key of the class. the curly braces indicates an optional parameter. This line can be deleted without any effect.

@override Widget build(BuildContext context) 
{ 
return MaterialApp( 
title: 'Flutter Demo', 
theme: ThemeData( primarySwatch: Colors.blue, ), 
home: const MyHomePage(), );
 } 
}

as we stated before we are copying a pre-defined class from material.dart which is "StatelessWidget" which has its own build method, which would show whatever is saved there, but here need to show our app thus we override that function to customize it as our like. here we tell the build a materialApp that has the following parameters a title, theme and home. the material app is the first thing you have to identify in the main class, as it is responsible of what to see on screen and managing the app.

• Title: is the title shown in the task manager in the device.
• Theme: it tells the app to have a primary color of blue.
• home: the home page.

class MyHomePage extends StatefulWidget {
 const MyHomePage({ Key? key }) : super(key: key);

  @override State<MyHomePage> createState() => _MyHomePageState(); }

class _MyHomePageState extends State<MyHomePage> {
 @override Widget build(BuildContext context) { 
return Container(
 child: Text("Hello World"),
 );
 } }

Same as the pervious class except it is a StatefulWidget, which means this screen can be changed in other words it can process variables, meanwhile the Statless Widget cannot process variables and it only built once, here we used Container from our material.dart file, this container has a child which is Text.

This is the summary of the code, you may have a look on Flutter Course of AppBrewery which explains this in details.

Best of luck in your journey.