Flutter Mobile Development · 课时

构建您的第一个 Flutter 应用

逐步创建一个简单的“Hello World” Flutter 应用，了解项目结构和热重载功能。

构建您的第一个 Flutter 应用 是 CoddyKit 上的免费 Flutter Mobile Development 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

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.

常见问题解答

「构建您的第一个 Flutter 应用」课时是免费的吗？

是的 — 「构建您的第一个 Flutter 应用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。

「构建您的第一个 Flutter 应用」这节课中我会学到什么？

逐步创建一个简单的“Hello World” Flutter 应用，了解项目结构和热重载功能。你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Flutter Mobile Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「构建您的第一个 Flutter 应用」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Flutter Mobile Development 课中编写并运行代码吗？

能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Flutter Mobile Development