Eksperimen Flutter di Zapp.run

Agustus 08, 2025

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

Ditulis oleh: Rianto
Tanggal: 08/08/2025 14.17 WIB

Flutter adalah framework UI buatan Google yang sangat powerful untuk membangun aplikasi lintas platform. Menariknya, kita bisa langsung mencoba Flutter tanpa instalasi menggunakan tool online bernama Zapp.run.

Pada artikel ini, saya akan membagikan eksperimen sederhana yang saya lakukan di Zapp.run, yaitu:

✅ Menampilkan gambar dari aset lokal
✅ Menampilkan teks
✅ Menambahkan tombol interaktif
✅ Mengatur layout dengan mudah

🧪 Apa Itu Zapp.run?

Zapp.run adalah playground resmi dari Flutter yang memungkinkan kita mencoba dan menjalankan kode Flutter langsung di browser — tanpa setup yang rumit.

🖼️ Menambahkan Gambar dari Aset

1. Siapkan Gambar

Pertama, upload gambar ke folder assets/ di dalam Zapp.run. Misalnya:

assets/
├── flutter_logo.png
├── logo.png
└── background.jpg

2. Ubah `pubspec.yaml`

Jangan lupa untuk mendaftarkan aset:

flutter:
  assets:
    - assets/P.jpg

Pastikan indentasi benar (2 spasi), dan file tersimpan.

💻 Kode Dart Lengkap

Berikut adalah kode Flutter lengkap yang saya gunakan:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gambar + Teks + Tombol',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fultter Zapp'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Gambar dari asset
            Image.asset(
              'assets/P.jpg',
              width: 150,
              height: 150,
            ),
            SizedBox(height: 20),
            // Teks
            Text(
              'Perkenalkan Saya Rianto',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            // Tombol
            ElevatedButton(
              onPressed: () {
                // Tindakan saat tombol ditekan
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Tombol ditekan!')),
                );
              },
              child: Text('Yang Tekan Ini Orang Gila'),
            ),
          ],
        ),
      ),
    );
  }
}

🎯 Hasil yang Dicapai

Dengan kode di atas, kita berhasil:

Menampilkan beberapa gambar lokal
Menampilkan teks sambutan
Membuat tombol yang bisa merespons saat ditekan
Menggunakan ListView untuk scroll tampilan

🧠 Catatan Penting

Gunakan ListView atau SingleChildScrollView agar konten bisa di-scroll.
Pastikan gambar di-declare dengan benar di pubspec.yaml.
Kamu bisa mencoba layout lain seperti Row, Column, atau GridView untuk tampilan yang lebih kompleks.

✨ Penutup

Eksperimen ini membuktikan bahwa Flutter sangat fleksibel dan menyenangkan — bahkan bisa dijalankan langsung dari browser lewat Zapp.run. Sangat cocok untuk belajar, membuat prototipe, atau menguji ide sebelum membangun aplikasi nyata.

Kamu bisa mencoba sendiri langsung di:
👉 https://zapp.run

Cari Blog Ini

Flutter Notes by Rianto