build zappRun brng cahya

 

🚀 Build UI Seru di Flutter: Gambar, Popup, dan Sedikit Kejutan!

Yo, pejuang koding Gen Z!
Kadang kita ngoding serius banget sampe lupa kalau bikin UI itu bisa dibikin fun.
Di postingan kali ini, aku bikin aplikasi Flutter yang nampilin gambar lokal, dan ada popup iseng yang muncul pas kamu pencet tombol. 🫣

Fitur-fiturnya:
✅ Tampilkan gambar lokal
✅ Popup AlertDialog dengan gambar horror base64
✅ Tampilan clean dan simpel

Kalau kamu lagi belajar showDialog, Image.asset, dan Image.network, ini cocok banget buat latihan seru-seruan.

---

🧠 Preview-nya kayak gimana sih?

• Ada satu gambar utama (dari asset lokal).

• Ketika tombol dipencet, muncul popup yang... agak spooky 😱

• Cocok buat latihan bikin interaksi user sederhana.

---

💻 Kodingannya di bawah ini — bisa langsung kamu coba!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gambar dan Popup di Flutter',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _tampilkanPopup(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('👻 Boo!'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(
              'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...',
              width: 150,
              height: 150,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10),
            Text('Kamu pasti kagett !!'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('Close'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ini adalah foto anas dan teman2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/images/IMG-20250731-WA0038_11zon.jpg',
              width: 200,
              height: 200,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _tampilkanPopup(context),
              child: Text('Coba pencet ...'),
            ),
          ],
        ),
      ),
    );
  }
}

---

📁 Catatan Penting:

✅ Pastikan gambar lokal kamu (.jpg) sudah disimpan di folder:

assets/images/

✅ Jangan lupa tambahkan asset ke pubspec.yaml:

flutter:
  assets:
    - assets/images/IMG.jpg

---

😈 Akhir kata...

Ngoding itu gak selalu harus kaku. Kadang bikin prank ringan dalam aplikasi juga bisa bikin belajar jadi makin seru.

Kalau kamu suka eksperimen kayak gini, jangan lupa share juga ke teman sekelas / rekan ngodingmu!

Dan ingat, setiap baris kode yang kamu tulis itu bukan cuma sintaks — itu langkah kecil menuju level developer yang lebih jago.🔥

Mau ide eksperimen seru lainnya? Misalnya:

• Buat tombol yang suaranya absurd

• Modal yang isinya meme receh

• Atau dark mode yang cuma berubah 1 warna doang 😎

Stay creative, tetap konsisten, dan jangan lupa istirahat.
Sampai ketemu di project iseng berikutnya. Kalau kamu punya gaya bahasa sendiri atau mau pakai emoji yang beda, tinggal bilang aja ya! Mau dibikinin versi lebih formal atau humoris pun bisa.

#FlutterTips #NgodingSantai #GenZNgoding #BelajarFlutter #PopupKaget #UIFlutter #FlutterFun

Salam: Cahya rizki m

https://zv1e206abv1e3.zapp.page/#/