In the previous article, we configured the Flutter SDK, Android toolchain, and VS Code, then verified the setup with Flutter Doctor. Now we can explore the code itself.
When you create a project, Flutter generates dozens of files and folders automatically. This can be confusing at first: which folders can you edit, which should you leave alone, and where does the app actually start running?
This article explores the Flutter project directory and walks through lib/main.dart line by line.
Create Your First Flutter Project
Open a terminal in VS Code or your system terminal, move to your working directory, and run:
flutter create belajar_flutter_dasar
cd belajar_flutter_dasar
code .The command creates a complete workspace that is ready to run on multiple platforms.
Understand the Flutter Project Folder Structure
Here is a map of the main folders generated by Flutter:
belajar_flutter_dasar/
├── android/ # Native project untuk platform Android (Gradle/Kotlin)
├── ios/ # Native project untuk platform iOS (Xcode/Swift)
├── web/ # Entry point untuk Flutter Web (index.html)
├── windows/ # Native runner untuk Windows Desktop
├── macos/ # Native runner untuk macOS Desktop
├── linux/ # Native runner untuk Linux Desktop
├── lib/ # PUSAT KODING: Semua kode Dart Anda ada di sini
│ └── main.dart # Entry point utama aplikasi
├── test/ # Unit testing dan widget testing
├── pubspec.yaml # Konfigurasi dependensi, aset gambar, dan font
└── pubspec.lock # Pengunci versi paket dependensiFolders to Focus On
- lib/: This is the main workspace for your application code. You will spend most of your coding time here. The lib/main.dart file is the app's entry point.
- pubspec.yaml: The main configuration file. Use it to add third-party packages, register local assets, and configure custom fonts. Note that YAML is sensitive to indentation.
- Native platform folders (android/, ios/, and others): These are native wrappers. You usually edit them only for operating-system settings such as app icons, package names, bundle IDs, or camera and location permissions.
Explore lib/main.dart
Let's replace the default counter-app boilerplate with a clean, minimal version that makes the main concepts easier to follow. Replace the contents of lib/main.dart with:
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: 'Aplikasi Pertama',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Beranda Flutter'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: const Center(
child: Text(
'Halo, ini aplikasi Flutter pertama saya!',
style: TextStyle(fontSize: 16),
),
),
);
}
}Let's break the code above into four important parts:
1. The main() Function and runApp()
void main() {
runApp(const MyApp());
}main(): The starting point of a Dart program.
runApp(): A Flutter function that takes the root widget (MyApp) and renders it on the device screen.
2. The Root Widget: MaterialApp
return MaterialApp(
title: 'Aplikasi Pertama',
theme: ThemeData(...),
home: const HomePage(),
);MaterialApp is the main wrapper that provides a Material Design system. It configures the global theme and navigation, and chooses the first screen through the home property.
3. The Basic Layout Structure: Scaffold
return Scaffold(
appBar: AppBar(...),
body: Center(...),
);Scaffold is the standard layout canvas for a mobile app. It provides ready-to-use slots such as:
- appBar: The navigation bar at the top of the screen.
- body: The app's main content area.
- floatingActionButton: An action button that floats near a corner.
- bottomNavigationBar: A navigation menu at the bottom of the screen.
4. The Widget Tree
Notice how the layout inside body is arranged:
Scaffold ➔ body ➔ Center ➔ child ➔ TextFlutter uses a hierarchy called the widget tree. Each parent widget contains child widgets to declaratively build the visual layout.
Conclusion
Understanding the folder structure and main.dart gives you a clear map for building an app. You know where to place assets, configure dependencies, and how MaterialApp and Scaffold form the app's basic structure.
In the next article (Part 4), we will cover Flutter layout fundamentals: Container, Row, Column, and ListView.
