การสร้างแอป Flutter แรกของคุณ
เรียนรู้ขั้นตอนการสร้างแอปพลิเคชัน Flutter อย่างง่ายด้วยข้อความ 'Hello World' ทำความเข้าใจโครงสร้างโครงการและฟีเจอร์โหลดซ้ำแบบทันที
การสร้างแอป Flutter แรกของคุณ เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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_appUnderstand 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 runMeet 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.
เรียนรู้ Dart ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 22
- บทเรียน
- 88
คำถามที่พบบ่อย
บทเรียน “การสร้างแอป Flutter แรกของคุณ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างแอป Flutter แรกของคุณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างแอป Flutter แรกของคุณ”
เรียนรู้ขั้นตอนการสร้างแอปพลิเคชัน Flutter อย่างง่ายด้วยข้อความ 'Hello World' ทำความเข้าใจโครงสร้างโครงการและฟีเจอร์โหลดซ้ำแบบทันที คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างแอป Flutter แรกของคุณ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม
ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระบบนิเวศและการตั้งค่า Flutter
- พื้นฐาน Dart สำหรับ Flutter
- การสร้างแอป Flutter แรกของคุณ
- การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await