🚀 Belajar Flutter Sambil Ngabuburit: Bikin Widget Gampang Banget!

Juli 30, 2025

Halo bestie 👋,
Di blog ini gue mau sharing dikit soal pengalaman ngulik Flutter (framework UI dari Google itu lho, yang bisa bikin app Android/iOS dari satu codebase). Kali ini gue bikin widget sederhana yang ada teks, gambar dari internet, dan tombol yang bisa dipencet ✨.

Langsung aja, ini dia hasil ngulik gue:

💡 Apa yang Akan Kita Bikin?

Widget-nya simpel banget:

🧾 Teks sambutan ala grup legendaris: WELCOME TO SIDIQ GROUP!!!!!!!
🖼️ Gambar dari internet yang kece abis
🔘 Tombol yang kalau ditekan muncul dialog lucu

🧑‍💻 Kodenya Gini 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('MENYALA'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'WELCOME TO SIDIQ GROUP!!!!!!!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),
            Image.network(
              'https://images.unsplash.com/photo-1753926562418-e721e7beb87d?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
              width: 300,
              height: 250,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    title: const Text('Anjay Ditekan'),
                    content: const Text('Lu nekan tombol!'),
                    actions: [
                      TextButton(
                        child: const Text('Tutup'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                );
              },
              child: const Text('Tekan Sini'),
            ),
          ],
        ),
      ),
    );
  }
}