First Flutter Widget

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

I assume that you have successfully installed flutter either with Android Studio IDE or VS Code and have successfully configured an emulator.

If you want to install flutter, kindly follow this official documentation.

https://flutter.dev/docs/get-started/install

//File Name: main.dart
//Flutter first Hello World! Widget
import 'package:flutter/material.dart';

void main() {

   runApp(MyApp());
}

class MyApp extends StatelessWidget {

   @override
   Widget build(BuildContext context){

      return MaterialApp(home: Text('Hello World!');

   }//build
}//MyApp
  1. Import Flutter package
  2. declare main function and run app i.e, runApp(MyApp)
  3. MyApp is a custom class that inherits from Stateless Widget(Later we’ll also look into StatfullWidget)
  4. MyApp class overrides build() method.
  5. build method returns a Widget and takes Build context as a parameter.
  6. MaterialApp() is a special widget that we should return. It does some base setup to turn combinational widgets into real app. The MaterialApp() takes a lot of named arguments, home is one of the named arguments where we use a text widget Text(‘Hello World!’).

Output: The output involves no UI and is a simple Hello World!

First Flutter Plugin – Output

I hope the logic and code behind the first flutter widget make sense.

Happy coding!