flutter beginner tutorial

Flutter Beginner Tutorial: Hello world Android Application

Introduction to flutter beginner tutorial

In this flutter beginner tutorial, I’m going to show you how to create a hello world android app.

This is a continuation of my flutter tutorial series if you are new here then check out my previous post.

In the last post, we learned how to download, install and set up flutter, we even created and ran our first application

DISCLAIMER: “I am using an Ubuntu system but it doesn’t matter. The codes will run everywhere anyway. I just had to say this in case I was going to do some terminal command things so you don’t get surprised right”

Ooh, I hard to say it.

Creating a basic hello world android app

Let us get started, Flutter uses Widgets to render everything that you create and see. Basically, everything in Flutter is a widget.

Here is an example code in Flutter that displays Hello World text with a black background on the center of the screen.

import 'package:flutter/material.dart';
void main() {
  runApp(
   Center(child: Text('Hello, world!',),),
  );
}

Flutter beginner tutorial understanding Our Code Structure

First of all, when starting out the creation of the applications with flutter we must import Material Design. Which we will use to create our application. That is why we must include as shown bellow

import 'package:flutter/material.dart';

Next, we must include the main function void main() {runApp();} because that is what Dart uses to run our app.

Center(...) Is the widget which is a Dart class that aligns other widgets in the middle of the screen. It has a property of child: Which takes a value of type Widget that may be Text(…), Container(…) or even Row(…) which we’ll learn later.

Text(...) Is a widget that displays text on to the screen. It takes in String as a property. It also takes other properties such as textDirection: for setting the direction of the text. The text direction can be left to right TextDirection.ltr or TextDirection.rtl for the right to left, style: for styling and others which we will learn.

A dive into the android hello world app code

At least from the above, we now have an idea as far as this flutter beginner tutorial is concerned. Since in this post we were to create a hello world app with flutter. Let’s do some coding here, you can copy-paste the code below and see the results.

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        body: Center(
          child: Text("Hello World",
          textDirection:TextDirection.ltr,
          style:TextStyle(fontSize: 40.0,
            color:Colors.teal, 
            fontWeight:FontWeight.bold,
            fontStyle: FontStyle.italic)),
        ),
      ),
    );
  }
}

The flutter beginner tutorial hello world android app result

flutter beginner tutorial
Hello World Android App Result

That’s an awesome hello world android app with flutter. Just as simple as such, we were able to create an app that is styled and looks amazing.

I know there are new widgets that I have introduced, such as the MaterialApp(…), Scaffold(…) don’t worry about them. We are going to learn about them in the new posts to come, where we will be discussing flutter widgets.

Conclusion

In this flutter beginner tutorial, we learned how to create a hello world android app using flutter widgets, such as Center(…), Text(…), MaterialApp(…), Scaffold(…).

We styled the text Hello World text with style: property which took TextStyle(…) as a value and we created a beautiful Hello World App.

Thank for coming by, now check out the next post where we’ll learn how to run flutter and solve some errors that usually occur when you run flutter for the first time.

4 thoughts on “Flutter Beginner Tutorial: Hello world Android Application”

  1. Pingback: Don't Replace These 11 Stock Android Apps With Third-Party Apps

  2. Pingback: 2 Ways: How To Install or Run Visual Studio Code in Ubuntu and Windows | INSTALLABLESS

  3. Pingback: Flutter Beginner Learn How To Install And Set Up In 2 Steps

  4. Pingback: Hello, World! | INSTALLABLESS

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest