30 days flutter challenge: Day 1 - Hello World Application

Hey guys, Welcome back to my blog… As all of you know the traditional application we make when we start programming or create an application. I know what you are thinking, and that is, “Hello World” program. So, let’s jump right into it.

Our applications output will look like this:

When we first create a new project, flutter by default creates a “main” file. So, to make our code clearer, we will create another file with the name of “HelloWorld.dart”. You can choose any name you like.

The complete code of the application is:

1. main file

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'HelloWorld.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HelloWorld(),
    );
  }
}

2. HelloWorld file

import 'package:flutter/material.dart';

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('30 days of flutter challenge: Day 1'),
        ),
        body: SafeArea(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Center(
              child: Text(
                'Hello World',
                style: TextStyle(fontSize: 20, color: Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Explanation:

Now, i’ll divide the code into chunks to make it much clearer to you.

StatelessWidget: As you know, everything in flutter is a widget. There are two types of widgets in flutter, “StatelessWidget and StatefulWidget”. In our case we are using, StatelessWidget. A StatelessWidget is immutable whose state cannot be changed. This widget does not depends on any data change or its behavior.

BuildContext: BuildContext refer to the location of a widget in a widget tree.

SystemChrome: SystemChrome.setEnabledSystemUIOverlays([]) is used to show display on full screen.

MaterialApp: An application that uses material design. A convenience widget that wraps a number of widgets that are commonly required for material design applications.

Appbar: The AppBar displays the toolbar widgets, leading, title, and actions, above and bottom.

Center Widget: As the name suggests, It is used to position its content at the center.

Text Widget: The text widget displays a string of text with a single style. If you need multiple styles for different words/sentences, You could use RichText

TextStyle: It is used to decorate the contents present in the Text Widget.

You can find github link for above code here.

Happy Coding ❤