Membangun Aplikasi Flutter Pertama Anda
Ikuti proses pembuatan aplikasi Flutter sederhana 'Hello World', pahami struktur proyek dan fitur hot reload.
Membangun Aplikasi Flutter Pertama Anda adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar Dart dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membangun Aplikasi Flutter Pertama Anda” gratis?
Ya — teks lengkap “Membangun Aplikasi Flutter Pertama Anda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Membangun Aplikasi Flutter Pertama Anda”?
Ikuti proses pembuatan aplikasi Flutter sederhana 'Hello World', pahami struktur proyek dan fitur hot reload. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Membangun Aplikasi Flutter Pertama Anda” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Ekosistem dan Penyiapan Flutter
- Dasar-Dasar Dart untuk Flutter
- Membangun Aplikasi Flutter Pertama Anda
- Pemrograman Asinkron dengan Futures dan async/await