Belajar Flutter: Membuat Aplikasi Sederhana Menampilkan Nama Kelompok dan Foto

 

Halo teman-teman!
Pada kesempatan kali ini, kita akan belajar membuat aplikasi Flutter sederhana yang menampilkan daftar nama anggota kelompok, sebuah foto, dan sebuah tombol yang bisa ditekan untuk menampilkan pesan.

Apa yang akan kita buat?

• Tampilan judul di AppBar

• Daftar nama anggota kelompok dalam teks

• Sebuah foto dari internet yang ditampilkan di tengah layar

• Tombol dengan aksi menampilkan pesan Snackbar

Kode lengkapnya akan saya jelaskan langkah demi langkah.

---

Struktur Kode

1. Membuat Aplikasi Flutter

Kita mulai dengan fungsi main() yang menjalankan aplikasi Flutter dengan MyApp.

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

2. Widget MyApp

MyApp adalah widget utama yang menggunakan MaterialApp sebagai root aplikasi.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo Widget Flutter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

• title memberikan judul aplikasi.

• theme mengatur warna utama.

• home menunjuk ke HomeScreen, halaman utama aplikasi.

3. Widget HomeScreen

Ini adalah tampilan utama aplikasi kita.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kelompok 1'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Aisah, Caca, Gadiza, Nasya, Qori',
              style: TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 20),
            Image.network(
              'https://images.unsplash.com/photo-1753925984756-7505c50a3170?q=80&w=1029&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
              width: 200,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Well')),
                );
              },
              child: const Text('Tekan sini guis'),
            ),
          ],
        ),
      ),
    );
  }
}

Penjelasan:

• Scaffold memberikan struktur dasar dengan AppBar dan body.

• AppBar menampilkan judul "Kelompok 1".

• body berisi Center untuk memposisikan isi di tengah layar.

• Column digunakan untuk menata widget secara vertikal.

• Text menampilkan nama-nama anggota kelompok dengan ukuran font 20.

• SizedBox memberikan jarak vertikal antar widget.

• Image.network menampilkan gambar dari URL.

• ElevatedButton adalah tombol yang ketika ditekan akan memunculkan pesan SnackBar dengan teks "Well".

---

Menjalankan Aplikasi

Untuk menjalankan aplikasi ini:

1. Pastikan Flutter sudah terinstall di komputer kamu.

2. Buat project baru atau gunakan project yang sudah ada.

3. Ganti isi file main.dart dengan kode di atas.

4. Jalankan aplikasi dengan perintah:

flutter run

---

Kesimpulan

Dengan aplikasi ini kamu belajar tentang:

• Struktur dasar aplikasi Flutter (MaterialApp, Scaffold, AppBar, Column)

• Menampilkan teks dan gambar dari internet

• Menambahkan tombol dengan aksi menggunakan ElevatedButton dan SnackBar

Ini adalah pondasi yang sangat penting untuk membuat aplikasi mobile yang interaktif dan menarik menggunakan Flutter.

---