🚀 Bikin Aplikasi Flutter Web Simpel Banget di Zapp.run!

🚀 Bikin Aplikasi Flutter Web Simpel Banget di Zapp.run!

Halo bestie developer pemula! 👋
Kali ini kita bakal ngoding santai bareng Flutter dan nyobain langsung via Zapp.run, jadi kamu nggak perlu install-install ribet dulu. Cocok banget buat kamu yang lagi belajar atau baru kenalan sama Flutter.

Di sini kita akan bikin aplikasi sederhana tapi kece: ada teks sambutan, gambar dari internet, dan tombol yang bisa munculin popup alert. Yuk simak bareng-bareng!

---

🧠 Apa yang Kita Pelajari?

✅ Cara bikin struktur dasar project Flutter
✅ Menampilkan teks dan gambar dari internet
✅ Menambahkan tombol aksi (button) dan menampilkan dialog (popup)

---

🧾 Kodingannya Nih!

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: 'Contoh Widget Flutter',
      home: const HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Demo Widget Flutter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Halo, Flutter Web di Zapp.run!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),
            Image.network(
              'https://images.unsplash.com/photo-1753925449605-ae94dbee88d7?q=80&w=1029&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
              width: 200,
              height: 150,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    title: const Text('Tombol Ditekan'),
                    content: const Text('Kamu menekan tombol!'),
                    actions: [
                      TextButton(
                        child: const Text('Tutup'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                );
              },
              child: const Text('Tekan Saya'),
            ),
          ],
        ),
      ),
    );
  }
}

---

📸 Apa yang Ditampilkan?

✅ Teks ucapan selamat datang
✅ Gambar dari internet yang otomatis muncul
✅ Tombol yang kalau diklik akan menampilkan pesan dialog

---

🔥 Penjelasan Singkat

• runApp(): Ini pintu masuk utama aplikasi Flutter kita.

• MaterialApp: Kerangka utama yang ngatur tampilan gaya Material Design.

• Scaffold: Wadah utama buat halaman, biar tampilannya rapi.

• AppBar: Bar bagian atas, buat judul halaman.

• Column: Buat nampilin widget secara vertikal.

• Image.network(): Nampilin gambar dari URL.

• ElevatedButton + AlertDialog: Tombol yang bisa munculin popup, bikin app kita interaktif.

---

🌐 Cobain Sekarang di Zapp.run!

Langsung aja ke: https://zapp.run

1. Pilih template Flutter

2. Paste kode di atas

3. Klik Run ▶

4. Liat hasilnya di browser. Gampang banget, kan?

---

🤩 Kesimpulan

Dengan beberapa baris kode, kamu udah bisa bikin aplikasi Flutter web yang punya teks, gambar, dan tombol aksi! Ini jadi langkah awal yang seru buat kamu yang pengen belajar bikin aplikasi mobile atau web pakai Flutter.

Jangan lupa eksplorasi lebih lanjut ya!
Kalau kamu suka postingan ini, share ke temen sekelasmu biar makin banyak yang jago Flutter! 🧑‍💻🔥

---

Silahkan Gunakan Link ini untuk mencoba aplikasi yang dibuat : https://z21dy06r121dz.zapp.page/#/

Salam : Darsu