0Pricing
Flutter Mobile Development · Lesson

Building Your First Flutter App

Walk through the process of creating a simple 'Hello World' Flutter application, understanding the project structure and hot reload feature.

Building Your First Flutter App is a free Flutter Mobile Development lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Your First Flutter App!

Time to build your first Flutter app — a simple Hello World to learn the workflow. You’re about to see why Flutter feels so fast.

Create a New Project

Run flutter create to scaffold a new project, then cd into the folder. One command and you’re ready to code.

flutter create my_first_app
cd my_first_app

Understand Project Structure

Flutter scaffolds several folders. The ones that matter: lib/main.dart (your code), pubspec.yaml (dependencies), and the android/ — ios/ platform dirs.

The App Entry Point: main.dart

Every app starts at main(). Inside it, runApp() takes your root widget and attaches it to the screen.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Launching App...', // Text displayed directly
        textDirection: TextDirection.ltr, // Required for root Text widget
        style: TextStyle(color: Colors.blue, fontSize: 20),
      ),
    ),
  );
}

Building Your MyApp Widget

Wrap your app in a root widget, often MyApp. For UI that doesn’t change, use a StatelessWidget — it just needs a build method describing the UI.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // This widget will define the app's look and feel
    return const Placeholder(); // A temporary visual marker
  }
}

MaterialApp & Scaffold Basics

MaterialApp adds Material Design; inside it Scaffold gives you the basic layout — an AppBar on top and a body for content.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'), // Text in the app bar
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!', // Our main content text
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Running Your New App

App ready? Run it. Start an emulator, simulator, or plug in a device, then run flutter run from the project root.

flutter run

Meet Hot Reload!

Hot Reload injects code changes into a running app almost instantly — no full restart, no lost state. Just save your .dart file to trigger it.

Hot Reload in Action

Try it yourself: tweak the AppBar text, the body, or the theme color below, then save and watch Hot Reload update the running app live.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.green), // Changed color!
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Updated App'), // Changed text!
        ),
        body: const Center(
          child: Text(
            'Hot Reloaded!', // Changed text and size!
            style: TextStyle(fontSize: 28, color: Colors.red),
          ),
        ),
      ),
    );
  }
}

Hot Reload vs. Hot Restart

Hot Reload injects code and keeps your app’s state — great for UI tweaks. Hot Restart rebuilds from scratch and wipes state, for bigger changes.

Quick Check: Hot Reload

You've seen Flutter's hot reload in action. Let's test your understanding!

Recap: First Flutter App

Congrats! You built and ran your first Flutter app — flutter create, the main.dart structure, MaterialApp + Scaffold, and the power of Hot Reload.

Frequently asked questions

Is the “Building Your First Flutter App” lesson free?

Yes — the full text of “Building Your First Flutter App” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.

What will I learn in “Building Your First Flutter App”?

Walk through the process of creating a simple 'Hello World' Flutter application, understanding the project structure and hot reload feature. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Flutter Mobile Development?

No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Building Your First Flutter App” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Flutter Mobile Development lesson?

Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Flutter Ecosystem & Setup
  2. Dart Fundamentals for Flutter
  3. Building Your First Flutter App
  4. Asynchronous Programming with Futures and async/await
← Back to Flutter Mobile Development