0Pricing
Flutter Mobile Development · Lektion

Entwicklung Ihrer ersten Flutter-App

Erfahren Sie Schritt für Schritt, wie Sie eine einfache Flutter-Anwendung mit „Hello World“ erstellen, und lernen Sie dabei die Projektstruktur und die Hot-Reload-Funktion kennen.

Entwicklung Ihrer ersten Flutter-App ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Entwicklung Ihrer ersten Flutter-App“ kostenlos?

Ja — der vollständige Text von „Entwicklung Ihrer ersten Flutter-App“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Entwicklung Ihrer ersten Flutter-App“?

Erfahren Sie Schritt für Schritt, wie Sie eine einfache Flutter-Anwendung mit „Hello World“ erstellen, und lernen Sie dabei die Projektstruktur und die Hot-Reload-Funktion kennen. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Flutter Mobile Development zu starten?

Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Entwicklung Ihrer ersten Flutter-App“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?

Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Flutter-Ökosystem und Einrichtung
  2. Dart-Grundlagen für Flutter
  3. Entwicklung Ihrer ersten Flutter-App
  4. Asynchrone Programmierung mit Futures und async/await
← Zurück zu Flutter Mobile Development