SifaMelby

 Tentu! Berikut adalah artikel blog lengkap yang merangkum semua eksperimen kamu menggunakan Flutter di zapp.run — termasuk penjelasan, kode, dan cara menjalankannya. Kamu bisa copy-paste ini langsung ke blog kamu.

---

🚀 Belajar Flutter di zapp.run: Menampilkan Gambar, Teks, dan Tombol dengan Gaya Android

Flutter adalah framework buatan Google untuk membangun aplikasi mobile, web, dan desktop dari satu codebase. Dalam eksperimen ini, saya menggunakan zapp.run — platform online yang memungkinkan kita menjalankan Flutter tanpa perlu instalasi.

Pada artikel ini, kita akan membahas bagaimana cara:

• Menampilkan gambar dari internet

• Menampilkan gambar dari assets lokal

• Menambahkan teks dan tombol

• Mengatur warna pada UI Flutter

---

🛠️ Persiapan: Menggunakan zapp.run

1. Buka https://zapp.run

2. Buat project Flutter baru

3. Ganti isi file main.dart dengan kode yang akan saya berikan

4. Jalankan dengan klik tombol ▶️ "Run"

---

1. ✅ Menampilkan Gambar dari Internet, Teks, dan Tombol

Berikut adalah contoh kode Flutter sederhana:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contoh Gambar, Teks, & Tombol',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh Flutter Sederhana'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              // Gambar dari Internet
              Image.network(
                'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-frame-5e555e9208de61ec22b5b8bdc71a65df8f6a9398c8ff04beab01b813d2753952.png',
                height: 150,
              ),

              SizedBox(height: 20),

              // Teks
              Text(
                'Selamat Datang di Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),

              SizedBox(height: 20),

              // Tombol
              ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tombol ditekan!')),
                  );
                },
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                ),
                child: Text(
                  'Tekan Saya',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

2. ✅ Menampilkan Gambar dari Assets Lokal

Langkah-langkah:

1. Buat folder assets/ di project kamu

2. Upload file gambar, misalnya logo.png

3. Edit pubspec.yaml untuk menambahkan:

flutter:
  assets:
    - assets/logo.png

4. Gunakan kode berikut di main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contoh Asset Gambar',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gambar dari Assets'),
          backgroundColor: Colors.teal,
        ),
        backgroundColor: Colors.teal[50],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              // Gambar dari assets
              Image.asset(
                'assets/logo.png',
                height: 150,
              ),

              SizedBox(height: 20),

              // Teks
              Text(
                'Halo dari Flutter + Assets!',
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),

              SizedBox(height: 20),

              // Tombol
              ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Tombol ditekan!'),
                    ),
                  );
                },
                style: ElevatedButton.styleFrom(
                  primary: Color(0xFF00897B),
                  onPrimary: Colors.white,
                ),
                child: Text('Tekan Saya'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

3. 🎨 Cara Mengganti Warna di Flutter

Kamu bisa mengganti warna hampir semua komponen di Flutter, seperti:

AppBar

backgroundColor: Colors.deepOrange

Background Scaffold

Scaffold(
  backgroundColor: Colors.yellow[100],
)

Warna Tombol

ElevatedButton.styleFrom(
  primary: Colors.green,      // Background
  onPrimary: Colors.white,    // Teks
)

Warna Teks

Text(
  'Teks Warna Merah',
  style: TextStyle(color: Colors.red),
)

Warna Kustom (HEX)

Color(0xFF2196F3) // sama dengan #2196F3

---

📌 Kesimpulan

Dengan Flutter dan zapp.run, kita bisa belajar membuat UI Android-style hanya dalam hitungan menit tanpa harus install apa pun! Kita telah mempelajari:

• Menampilkan gambar dari internet dan lokal (assets)

• Menambahkan teks dan tombol

• Mengatur warna pada berbagai elemen UI

Jika kamu ingin membuat aplikasi yang lebih kompleks, seperti form input, navigasi antar halaman, atau animasi, Flutter juga sangat mendukung.

---

✍️ Penutup

Semoga eksperimen ini bermanfaat! Kamu bisa menjadikannya sebagai dasar untuk membuat portofolio Flutter atau sekadar belajar UI/UX development dengan cepat.

Ingin saya bantu lanjutkan dengan navigasi antar halaman atau input form? Tinggal tulis di komentar atau hubungi saya! 🚀

---

Kalau kamu ingin artikel ini dalam format Markdown atau HTML juga, tinggal bilang — bisa saya buatkan.

Jika ingin mencoba aplikasi silahkan klik link di bawah ini:

https://zi1w406epi1w5.zapp.page/#/