How To Make Your First Hello World Application In Flutter?

Flutter is an open-source UI (User Interface) software development kit (SDK) created by Google. It allows developers to build cross-platform applications for mobile, web, and desktop using a single codebase. With Flutter, you can write code once and deploy it on multiple platforms without having to rewrite it for each platform separately.

Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, Web(beta), and desktop(technical preview) from a single codebase written in Dart Language. In this article, I will provide line by line explanation of how to build a simple Hello World App using Flutter.

To be able to create even a very simple Hello World app in Flutter, you will need to have Flutter SDK installed on your computer. If you have not done so yet, then please watch the following video tutorials to help you install Flutter SDK.

In Flutter, everything is a widget, and user-defined widgets may be created using predefined widgets in the same way that user-defined data types can be made using int, float, and double.

To create a “Hello, World!” application in Flutter, you’ll need to follow these steps:

Make Your First Hello World Application In Flutter:

Step 1: Set up Flutter

• Install Flutter: Follow the official Flutter installation guide for your operating system (Windows, macOS, or Linux).
• Set up an editor: Choose an editor of your choice, such as Visual Studio Code or Android Studio, and install the necessary plugins for Flutter development.

Step 2: Create a new Flutter project

• Open a terminal or command prompt.
• Run the following command to create a new Flutter project:
  flutter create hello_world_app
  This command will create a new directory named hello_world_app with the basic project structure.

Step 3: Edit the main.dart file

• Open the project directory in your chosen editor.
• Open the lib/main.dart file.

Replace the existing code with the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(HelloWorldApp());
}

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello, World!',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Step 4: Run the application

• Ensure you have a device connected or an emulator running.
• In the terminal or command prompt, navigate to the project directory (hello_world_app).
• Run the following command to start the application:
  flutter run
  This will compile the code and launch the application on your connected device or emulator.

Last Words:

Congratulations! You’ve created a “Hello, World!” application using Flutter. The app will display a centered text saying “Hello, World!” with an app bar at the top.