🎨 Eksperimen Flutter Web di Zapp.run: Dari Menampilkan Gambar, Teks, Tombol, hingga Bentuk Love ❤️

1. Pendahuluan

Flutter bukan hanya untuk membuat aplikasi Android dan iOS, tapi juga bisa untuk Web.
Dengan bantuan Zapp.run, kita bisa langsung membuat dan menjalankan aplikasi Flutter tanpa perlu instalasi di laptop.
Di eksperimen kali ini, kita akan membuat:

• Menampilkan gambar dari assets

• Menampilkan teks

• Membuat tombol dengan aksi

• Memotong gambar menjadi bentuk hati (love)

---

2. Menyiapkan Proyek di Zapp.run

Langkah-langkah awal:

1. Buka https://zapp.run

2. Pilih Create → Flutter Web

3. Buat folder assets di dalam project

4. Upload gambar (mantan2.jpg atau gambar lain) ke folder assets

5. Buka file pubspec.yaml dan tambahkan:

   flutter:
     assets:
       - assets/mantan2.jpg
   

6. Buka file main.dart dan hapus kode default

---

3. Kode Full Flutter: Gambar, Teks, Tombol, dan Bentuk Love

Berikut adalah kode lengkap yang bisa langsung dijalankan di Zapp.run:

import 'package:flutter/material.dart';
import 'dart:math';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gambar Love, Teks, dan Tombol',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.pink),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Love Shape Demo"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Gambar bentuk hati ❤️
            ClipPath(
              clipper: HeartClipper(),
              child: Image.asset(
                'assets/mantan2.jpg',
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(height: 20),

            // Menampilkan teks
            const Text(
              "Halo dari Flutter Web di Zapp.run!",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),

            // Menampilkan tombol
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text("Tombol ditekan!")),
                );
              },
              child: const Text("Klik Saya"),
            ),
          ],
        ),
      ),
    );
  }
}

// CustomClipper untuk bentuk hati ❤️
class HeartClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;

    Path path = Path();
    path.moveTo(width / 2, height * 0.75);
    path.cubicTo(
      width * 1.2, height * 0.45,
      width * 0.8, height * -0.4,
      width / 2, height * 0.3,
    );
    path.cubicTo(
      width * 0.2, height * -0.4,
      -width * 0.2, height * 0.45,
      width / 2, height * 0.75,
    );
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

---

4. Penjelasan Kode

• Image.asset() → untuk menampilkan gambar dari folder assets

• ClipPath + CustomClipper → memotong gambar menjadi bentuk hati ❤️

• Text() → menampilkan teks dengan style tebal dan ukuran tertentu

• ElevatedButton → membuat tombol dengan aksi ketika ditekan

• SnackBar → pesan pop-up sementara saat tombol ditekan

---

5. Hasil Akhir

Saat dijalankan, aplikasi akan menampilkan:

1. Gambar berbentuk hati

2. Teks “Halo dari Flutter Web di Zapp.run!”

3. Tombol “Klik Saya” yang memunculkan pesan di bawah layar

          

jika ingin mencoba aplikasi silahkan klik ling berikut:

https://zg1ow06vjg1ox.zapp.page/#/

---

6. Kesimpulan

Dengan Flutter Web di Zapp.run, kita bisa bereksperimen cepat membuat UI cantik tanpa ribet instalasi.
Teknik ini bisa dikembangkan untuk membuat galeri foto, kartu ucapan, atau aplikasi kreatif lainnya.
Bahkan, kita bisa memadukan bentuk unik lain seperti lingkaran, bintang, atau bentuk custom sesuai imajinasi.

---

Salam, Redaksi.

Read More