membuat aplikasi flutter sederhana

 Tentu! Berikut ini adalah artikel lengkap yang bisa kamu posting di blog tentang eksperimen Flutter di Zapp.run yang menampilkan gambar, teks, dan tombol. Saya sertakan juga kode full-nya agar pembaca bisa langsung coba.

---

Membuat Aplikasi Flutter Sederhana di Zapp.run: Menampilkan Gambar, Teks, dan Tombol

Flutter adalah framework populer untuk membuat aplikasi mobile dan web dengan tampilan menarik dan performa tinggi. Di tutorial ini, kita akan mencoba eksperimen sederhana menggunakan Zapp.run, sebuah online IDE yang memudahkan kamu untuk membuat dan menjalankan aplikasi Flutter langsung di browser tanpa setup yang rumit.

---

Apa yang Akan Kita Buat?

Kita akan membuat aplikasi Flutter yang menampilkan:

• Gambar yang diambil dari folder assets

• Sebuah teks di bawah gambar

• Tombol yang ketika ditekan akan menjalankan sebuah aksi sederhana (misalnya menampilkan pesan di console)

---

Persiapan di Zapp.run

1. Buka https://zapp.run dan buat proyek Flutter baru.

2. Upload gambar yang ingin digunakan ke folder assets/. Misalnya saya menggunakan gambar bernama logo.png.

---

Kode Flutter Lengkap

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contoh Zapp.run',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh Gambar, Teks, & Tombol'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Menampilkan gambar dari assets
              Image.asset(
                'assets/logo.png', // Pastikan gambar ini sudah diupload di Zapp.run
                width: 150,
                height: 150,
              ),

              SizedBox(height: 20),

              // Menampilkan teks
              Text(
                'Halo dari Zapp.run!',
                style: TextStyle(fontSize: 20),
              ),

              SizedBox(height: 20),

              // Tombol dengan aksi saat ditekan
              ElevatedButton(
                onPressed: () {
                  print('Tombol ditekan!');
                },
                child: Text('Tekan Saya'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

Penjelasan Kode

• Image.asset
  Widget ini digunakan untuk menampilkan gambar yang sudah kita upload di folder assets/. Pastikan path-nya sudah benar.

• Text
  Menampilkan teks sederhana di bawah gambar.

• ElevatedButton
  Tombol yang ketika ditekan akan mengeksekusi fungsi di onPressed, di sini hanya mencetak pesan ke console.

• Column & Center
  Agar widget-widget tersusun vertikal dan berada di tengah layar.

---

Kesimpulan

Dengan hanya beberapa baris kode dan menggunakan Zapp.run, kamu sudah bisa membuat aplikasi Flutter yang menampilkan gambar, teks, dan tombol interaktif. Ini adalah langkah awal yang bagus untuk belajar Flutter tanpa harus instalasi rumit.

---

Jangan lupa:

• Upload file gambar kamu ke folder assets/ di Zapp.run

• Pastikan nama dan path gambarnya sesuai di kode

• Eksplorasi lebih jauh dengan menambahkan aksi lain di tombol!

---

Kalau kamu ingin tutorial lanjutannya, seperti membuat navigasi atau animasi, tinggal beri tahu ya! Selamat mencoba!

---

Apakah kamu ingin saya bantu buatkan versi artikel dengan format markdown siap upload ke blog atau dalam format lain?

klik link di bawah ini

https://zc3e06j2c3f0.zapp.page/#/