Bagus sekali! Menuliskan eksperimen kamu dalam bentuk artikel blog adalah cara terbaik untuk memperkuat pemahaman sekaligus berbagi ilmu dengan orang lain.

Berikut ini saya buatkan struktur artikel blog lengkap (siap kamu posting ke platform seperti Medium, Blogger, Wordpress, atau Notion). Artikel ini membahas tiga eksperimen:

1. Menampilkan gambar dari internet

2. Menampilkan gambar dari assets di Zapp.run

3. Menambahkan teks dan tombol

---

🚀 Eksperimen Flutter Web di Zapp.run: Gambar, Teks, dan Tombol

Flutter kini tak hanya terbatas di mobile, tapi juga bisa digunakan untuk membangun aplikasi web. Dalam artikel ini, saya akan membagikan eksperimen saya menggunakan Flutter Web via Zapp.run — platform online Flutter IDE yang praktis tanpa perlu instalasi.

---

🧪 Eksperimen 1: Gambar dari Internet + Teks + Tombol

🎯 Tujuan:

Menampilkan gambar dari internet, teks sambutan, dan tombol yang memunculkan notifikasi (Snackbar).

✅ Kode Lengkap:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gambar Internet',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  void _tombolDitekan(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Tombol telah ditekan!')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter: Gambar, Teks, Tombol')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(
              'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-frame-6b5e407573d97d0cb8cfb5e7498b42ee0e2042c4931f198cf1f7d2e4c5d4b2b3.png',
              height: 150,
            ),
            SizedBox(height: 20),
            Text(
              'Selamat datang di Flutter Web!',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _tombolDitekan(context),
              child: Text('Tekan Saya'),
            ),
          ],
        ),
      ),
    );
  }
}

🔧 Cara Menjalankan:

1. Buka https://zapp.run

2. Pilih Flutter Web

3. Tempelkan kode ke file main.dart

4. Klik Run

---

🧪 Eksperimen 2: Gambar dari Assets + Teks + Tombol

🎯 Tujuan:

Menggunakan gambar lokal (assets) di Flutter Web, dan menampilkannya bersama teks dan tombol.

✅ Langkah Persiapan:

1. Upload gambar:

   • Klik ikon Assets di Zapp.run

   • Upload file, misalnya: logo.png

   • Pastikan file berada di folder: assets/logo.png

2. Edit pubspec.yaml:

flutter:
  assets:
    - assets/logo.png

Pastikan indentasi menggunakan 2 spasi, bukan tab.

---

✅ Kode Lengkap main.dart:

import 'package:flutter/material.dart';

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

// Aplikasi utama
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gambar dari Asset',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  void _tombolDitekan(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Tombol ditekan!')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gambar Asset + Teks + Tombol'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Gambar dari asset
            Image.asset(
              'assets/logo.png',
              height: 150,
            ),
            SizedBox(height: 20),

            // Teks
            Text(
              'Halo dari Flutter Web!',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),

            // Tombol
            ElevatedButton(
              onPressed: () => _tombolDitekan(context),
              child: Text('Klik Saya'),
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 Penjelasan Singkat:

Widget	Kegunaan
Image.network()	Menampilkan gambar dari internet
Image.asset()	Menampilkan gambar dari file lokal (harus daftarkan di pubspec)
Text()	Menampilkan teks
ElevatedButton()	Membuat tombol
SnackBar	Menampilkan pesan sementara di bawah layar

---

✍️ Penutup

Flutter sangat fleksibel — bisa digunakan untuk Android, iOS, Desktop, dan Web. Dengan Zapp.run, kamu bisa langsung eksperimen tanpa setup IDE.

Dalam artikel ini, kita sudah:

• Menampilkan gambar dari internet

• Menampilkan gambar dari asset lokal

• Menambahkan teks & tombol

• Menampilkan snackbar saat tombol ditekan

🎯 Selanjutnya kamu bisa coba:

• Navigasi antar halaman

• Form input dengan TextField

• ListView untuk daftar dinamis

• Integrasi dengan API atau Firebase

---

🔗 Sumber & Tools

• Zapp.run (Flutter Online IDE)

• Flutter Docs

---

https://zt1vo06m1t1vp.zapp.page/#/