Flutter-dart-untuk-menampilkan gambar

🔥 Belajar Flutter Gak Pake Ribet: Tampilin Gambar + Teks di Aplikasi Kamu!

Hai bestie dev! 👋

Pernah kebayang gak, kamu bikin aplikasi Android sendiri yang ada gambar kece dan tulisan custom ala kamu? Nah, di artikel kali ini, kita bakal ngulik bareng gimana caranya bikin app Flutter simpel yang:

✅ Menampilkan gambar dari folder project
✅ Nampilin teks keren di bawahnya
✅ Dibikin langsung pake Flutter, dan bisa dijalanin di zapp.run atau emulator kamu!

---

🚀 Tampilan yang Akan Kita Bikin

Bayangin tampilannya gini:

📷 Gambar di tengah
💬 Teks: "Ini Kelompok dua!!!"

Simple but impactful, kan?

Hasih jadinya :

---

💻 Kodenya Nih, Langsung Copas Aja Gak Pake Basa-basi

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 Gambar 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('klompok 2 wenn')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Gambar dari internet
            Image.asset(
              'lib/teinglah.jpeg',
              width: 250,
            ),
            const SizedBox(height: 20),
            // Teks di bawah gambar
            const Text(
              'Ini Kelompok dua!!!',
              style: TextStyle(fontSize: 22),
            ),
          ],
        ),
      ),
    );
  }
}

---

📂 Jangan Lupa, Gambar Harus Di-Setup Juga!

Biar Image.asset() bisa jalan, kamu harus:

1. Taruh gambar teinglah.jpeg ke folder lib/ atau assets/

2. Update pubspec.yaml kayak gini:

flutter:
  assets:
    - lib/teinglah.jpeg

⚠️ Hati-hati ya, indentasi/spasi di pubspec.yaml harus bener, jangan tab!

---

🌈 Penjelasan Singkat

• Image.asset(...): nampilin gambar dari file lokal

• Text(...): bikin teks custom

• Scaffold: kerangka dasar halaman

• AppBar: header aplikasi biar kelihatan rapi

---

✨ Penutup

Dengan kode simpel ini, kamu udah bisa:

✅ Tampilin gambar
✅ Kasih teks custom
✅ Bikin tampilan app yang lebih hidup

Next step? Bisa nambah tombol interaktif, ganti background, atau bikin galeri foto kamu sendiri! Gaskuy, jangan berhenti ngulik!

---

📸 Powered by Flutter — bikin aplikasi gak perlu ribet, yang penting niat & ngopi ☕🔥
💬 Kalau bingung, tinggal komen aja yaa~

---

Anggota :

- M. Farid 
- Risty 
- Euis
- Zahra 
- Dehira