Praktikum Flutter Seri 2 — Struktur Project dan main.dart

 

Praktikum Flutter Seri 2 — Struktur Project dan main.dart

📱 Mengenal Struktur Project Flutter dan main.dart

Pada praktikum Flutter Seri 2, kita belajar mengenal struktur project Flutter serta memahami fungsi file main.dart sebagai bagian utama dari aplikasi Flutter.

Flutter menggunakan bahasa pemrograman Dart untuk membuat aplikasi. Saat sebuah project Flutter dijalankan, program akan dimulai dari fungsi main() yang berada di dalam file main.dart.

---

🎯 Tujuan Praktikum

Tujuan dari praktikum ini adalah:

• Mengenal struktur dasar project Flutter.

• Mengetahui fungsi file main.dart.

• Memahami fungsi main().

• Memahami penggunaan runApp().

• Mengenal MaterialApp dan Scaffold.

• Membuat tampilan sederhana menggunakan AppBar, Center, Container, dan Text.

---

📂 Struktur Project Flutter

Ketika membuat project Flutter, terdapat beberapa folder dan file penting. Salah satunya adalah folder lib.

Di dalam folder lib biasanya terdapat file:

lib/
└── main.dart

File main.dart merupakan file utama yang digunakan untuk menjalankan aplikasi Flutter.

Selain lib, project Flutter juga memiliki folder dan file lain seperti android, ios, web, test, serta pubspec.yaml.

---

🚀 Fungsi main.dart

File main.dart digunakan sebagai titik awal aplikasi Flutter.

Contoh kode paling sederhana:

void main() {
  runApp(const MyApp());
}

Fungsi main() akan dijalankan pertama kali ketika aplikasi dimulai.

Sedangkan runApp() digunakan untuk menjalankan widget utama aplikasi.

---

🧩 Alur Dasar Aplikasi Flutter

Pada praktikum ini kita mempelajari alur:

main() → runApp() → MaterialApp → Scaffold → AppBar → Center → Container → Text

Penjelasannya:

1. main()
   Menjadi titik awal program.

2. runApp()
   Menjalankan widget utama aplikasi.

3. MaterialApp
   Menjadi dasar aplikasi dengan desain Material.

4. Scaffold
   Menyediakan struktur dasar halaman aplikasi.

5. AppBar
   Digunakan untuk membuat bagian bar di atas aplikasi.

6. Center
   Digunakan untuk menempatkan widget di tengah.

7. Container
   Digunakan sebagai wadah untuk mengatur ukuran, warna, padding, dan lainnya.

8. Text
   Digunakan untuk menampilkan tulisan.

---

💻 Contoh Program

Berikut contoh aplikasi sederhana yang dibuat pada praktikum:

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Praktikum Flutter Seri 2'),
        ),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(20),
            child: const Text(
              'Hello Flutter!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

---

🔍 Penjelasan Kode

Bagian:

import 'package:flutter/material.dart';

digunakan untuk mengimpor library Material Flutter agar kita dapat menggunakan widget seperti MaterialApp, Scaffold, AppBar, dan Text.

Kemudian:

void main() {
  runApp(const MyApp());
}

merupakan bagian awal program. main() menjalankan aplikasi melalui runApp().

Selanjutnya terdapat:

class MyApp extends StatelessWidget

yang digunakan untuk membuat widget utama aplikasi.

Pada bagian:

MaterialApp(
  home: Scaffold(

MaterialApp menjadi dasar aplikasi, sedangkan Scaffold menyediakan struktur halaman.

Untuk bagian atas halaman digunakan:

appBar: AppBar(
  title: const Text('Praktikum Flutter Seri 2'),
),

Sedangkan isi halaman berada pada:

body: Center(

Widget Center membuat isi berada di tengah halaman.

Di dalamnya terdapat:

Container(
  padding: const EdgeInsets.all(20),
  child: const Text('Hello Flutter!'),
)

Container digunakan sebagai wadah dan diberi padding, sedangkan Text digunakan untuk menampilkan tulisan.

---

📱 Hasil Praktikum

Setelah program dijalankan, aplikasi akan menampilkan sebuah halaman dengan:

• AppBar di bagian atas.

• Judul Praktikum Flutter Seri 2.

• Tulisan Hello Flutter! di bagian tengah layar.

Dari program sederhana ini, kita sudah mulai memahami bagaimana Flutter menyusun tampilan aplikasi menggunakan widget.

---

💡 Kesimpulan

Pada Praktikum Flutter Seri 2, kita mempelajari struktur project Flutter dan fungsi main.dart. Kita juga memahami bahwa aplikasi Flutter dimulai dari fungsi main(), kemudian menjalankan aplikasi menggunakan runApp().

Selain itu, kita mengenal beberapa widget dasar seperti MaterialApp, Scaffold, AppBar, Center, Container, dan Text.

Dengan memahami struktur dasar ini, kita akan lebih mudah untuk melanjutkan ke praktikum Flutter berikutnya dan membuat aplikasi yang lebih kompleks.

"Belajar Flutter dimulai dari memahami widget-widget kecil, lalu menggabungkannya menjadi aplikasi yang keren." 🚀