Building Your First Flutter App: Hello World Tutorial

Introduction

Flutter is Google’s open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. In this tutorial, you’ll create your first Flutter app— a classic “hello world” example. By the end, you’ll understand how to install Flutter, scaffold a project, write Dart code, and run your hello world application on an emulator or device.

Installing the Flutter SDK

Before writing code, install the Flutter SDK:

• Download Flutter: Visit flutter.dev and grab the stable channel SDK for your OS. • Extract and configure PATH:

• On macOS/Linux: unzip into ~/development/flutter and add
  

  export PATH="$PATH:~/development/flutter/bin"

• On Windows: extract to C:\flutter and update Environment Variables to include C:\flutter\bin.
  • Verify installation:
  

  flutter doctor

  This command checks for missing dependencies (e.g., Android SDK, Xcode). Follow any prompts to complete setup. A green check mark next to each item means you’re ready.

Creating a New Flutter Project

With Flutter installed, scaffold your hello world app:

1. Open a terminal (or PowerShell on Windows).

2. Run:

   flutter create hello_world_app

   This generates a default Flutter project in the hello_world_app folder.

3. Change directory:

   cd hello_world_app

4. Inspect the structure:

   • lib/: contains your Dart code.

   • android/, ios/, web/: platform-specific shells.

   • pubspec.yaml: metadata and dependencies.

Writing Your First Hello World App

The default template already shows a counter app. Let’s replace it with a minimal hello world:

1. Open lib/main.dart in your favorite editor (e.g., VS Code or Android Studio).

2. Replace its contents with the following snippet:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
  home: Scaffold(
    body: Center(child: Text('Hello, world!', style: TextStyle(fontSize: 24))),
  ),
));

This code does the following:

• Imports Flutter’s material library.

• Defines main() that calls runApp() with a MaterialApp.

• Uses Scaffold to provide a basic visual layout.

• Places Text('Hello, world!') at the center with a font size of 24.

Close variants like hello world or “Hello World” can be used interchangeably, but consistency matters when referring to your app title or UI text.

Running the App on an Emulator or Device

To see your hello world application in action:

• Start an emulator:

Android: Open Android Studio > AVD Manager > Launch a virtual device.

iOS: Open Xcode > Simulator.
• Connect a physical device via USB and enable USB debugging (Android) or trust the computer (iOS).

Then execute:

flutter run

This builds the app, installs it on the target, and streams logs. You should see a white screen with “Hello, world!” centered. Hot reload is enabled by default—modify the text, save, and watch the UI update instantly by typing 'r' in the terminal.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Congratulations—you’ve built and run your first hello world Flutter application. You learned how to install the Flutter SDK, create a new project, write a minimal Dart snippet, and deploy to an emulator or physical device. This foundation prepares you for more advanced UI components, state management solutions, and backend integrations like Firebase.