Creating Hello World App in Flutter

Hey guys, so now from the past month I had now been exploring Google's Flutter and it's kind of interesting. I mean native is good but in case you want more complex UI in less amount of time with huge support then Flutter seems to be a good choice although Facebook's React Native is also there But I haven't explored that much yet.

So, today's let's see how we can create a simple Hello World app in Flutter using Dart language.

For DART checkout their official - https://dart.dev/guides
For Flutter Setup - https://flutter.dev/docs/get-started/install

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }
}

In flutter everything is in form of widgets(pre made components by Flutter team or other developers).

• We get a huge number of pre made widgets in material package that's why we included material.dart file in order to use these widgets by flutter team.

• We need to define a main function which is starting point of our app.

• Stateless widgets in which every value defined remains constant throughout the lifecycle of app. Stateless Widget are used to make screens where data is gonna remain same and will not change on user interaction.

• We need to provide name of class (here MyApp) which extends Stateless widget which means it is child of Stateless Widget and it inherits properties and methods from Stateless widget.

• Then we define a build function and pass a context inside it which reference to current class and we return a widget from this build function as we define that it will return Widget.

• First widget we see is MaterialApp widget which provides material layout provided by Google to our app.

• Next comes Safe Area and Scaffold Widget which is defined in home property of MaterialApp and Scaffold widget provides a blank screen for our app with white background.Safe Area brings your app's content whithin safe area that is defined for your device screen.

• In Scaffold's body we used Center widget and it centers it's child to center of screen and we define a Text widget inside Center widget. So, we are saying to center text defined here.

For more info on these widgets checkout here -
MaterialApp - https://api.flutter.dev/flutter/material/MaterialApp-class.html
SafeArea - https://api.flutter.dev/flutter/widgets/SafeArea-class.html
Scaffold - https://api.flutter.dev/flutter/material/Scaffold-class.html
Center - https://api.flutter.dev/flutter/widgets/Center-class.html
Text - https://api.flutter.dev/flutter/dart-html/Text-class.html

Here you can check all the properties and methods available under this particular widget.

Now run your app using

flutter run

App will look like this

Hope, you get a basic idea to get started with first application in Flutter.