first fluter app Archives

Note: This blog post is the continuation of the previous blog – First Flutter Widget

In the previous blog post, we just created a widget that shows a simple ‘Hello World!’ text which was left aligned and there was no App Bar and title in that widget. That was just to break the ice.

Remember: Everything in flutter is a Widget.

//File Name: main.dart
import 'package:flutter/material.dart';

/* The arrow function allows us to create a simplified function consisting of a single expression. 
 * We can omit the curly brackets and the return keyword
 */

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

class MyApp extends StatelessWidget{
  
  @override
  Widget build(BuildContext context){
    
    return MaterialApp(
     /*
      * A Scaffold Widget provides a framework which implements the basic material design visual 
      * layout structure of the flutter app.
       */
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter App'),
        ), //AppBar()
        body: Text('Welcome to Flutter'),
      ), //Scaffold()
    ); //MaterialApp()
  } //build()
} //MyApp()

MaterialApp() Widget takes a lot of named arguments. Here, we have used only ‘home’ named argument.

Scaffold() Widget also takes a lot of named arguments. Here, we have used only appBar and body named arguments.

appBar also takes a lot of arguments. Here we have used only title argument which takes a Text() Widget.
body also takes a Text() Widget.

Output: We have a nice UI based output.

This simple app has used many widgets but remember everything in Flutter is a Widget. Our whole app is a widget which contains many nested widgets.

If you have any question regarding above code please ask in the comments section.

Happy Coding!

Tag: first fluter app

First Flutter App