Basic Flutter Program

Basic Flutter Program

In this section, you will learn how to create and run simple flutter program.

Steps To Create Flutter Project

Let’s create a flutter project called first_app. Follow the below steps to create a flutter project.

• Open command prompt/terminal.
• Type flutter create first_app and press enter.
• Type cd first_app and press enter.
• Type code . to open project with visual studio code.

Example 1: Hello World Program

This is a simple Flutter application that displays Hello World on screen. First, open the main.dart file from the lib folder and replace the code with the below code.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    ),
  );
}

Basic Flutter Program Explained

• The import ‘package:flutter/material.dart’; means we’re using the Material design package from Flutter.
• The void main() {…} function is where every Flutter application starts.
• The runApp(…); function is how we initialize and launch the app’s UI.
• The MaterialApp widget is our foundation for creating Material Design apps in Flutter.
• The Scaffold widget provides a basic visual structure, like a canvas, to design our app upon.
• The AppBar widget is like the top bar of an app, where we can place a title or action buttons.
• The Text widget is simply for displaying text on the screen.
• The Center widget centers the child widget.

Run Flutter Project

To run flutter project, go to run menu and click on Start Debugging or Run Without Debugging. You can also run the project with this command.

flutter run

Challenge

• Create a flutter project called second_app. Display your name on screen.