Program Sederhana Menampilkan sebuah kotak berwarna biru tua di tengah layar perangkat bergerak

Pendahuluan
Dalam pengembangan aplikasi perangkat bergerak (mobile), sering kali kita ingin menampilkan elemen-elemen UI sederhana seperti kotak atau bentuk-bentuk geometris lainnya. Pada artikel ini, kita akan membuat program sederhana yang menampilkan sebuah kotak berwarna biru tua di tengah layar perangkat bergerak. Contoh ini akan menggunakan bahasa pemrograman Flutter karena framework ini bersifat lintas platform dan mudah digunakan.

Langkah-Langkah Implementasi

1. Instalasi Flutter
Pastikan Anda telah menginstal Flutter SDK di komputer Anda. Jika belum, Anda bisa mengikuti panduan resmi Flutter untuk menginstalasi.
2. Membuat Proyek Flutter Baru
Setelah Flutter terinstal, buat proyek baru dengan perintah di terminal atau command prompt:flutter create kotak_biru_tuaLalu masuk ke direktori proyek:cd kotak_biru_tua
3. Struktur Program
Buka file lib/main.dart dan edit isinya untuk menampilkan kotak berwarna biru tua di tengah layar.import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.blue[900], // Warna biru tua
          ),
        ),
      ),
    );
  }
}

4. Penjelasan Kode
MaterialApp: Widget utama yang menjalankan aplikasi.Scaffold: Memberikan struktur dasar untuk tampilan aplikasi, seperti latar belakang.Center: Widget ini memastikan kotak berada tepat di tengah layar.Container: Digunakan untuk membuat kotak. Properti width dan height menentukan ukuran kotak, sedangkan properti color memberikan warna biru tua (dengan kode Colors.blue[900]).
5. Menjalankan Aplikasi
Untuk menjalankan aplikasi, gunakan perintah berikut di terminal:flutter runAplikasi ini akan menampilkan sebuah kotak berwarna biru tua berukuran 200x200 piksel di tengah layar perangkat bergerak.
Penutup
Dengan langkah-langkah di atas, Anda berhasil membuat program sederhana yang menampilkan kotak berwarna biru tua di tengah layar. Ini merupakan contoh dasar dari penggunaan Flutter untuk membuat antarmuka pengguna yang responsif dan menarik di perangkat bergerak. Anda dapat mengembangkan lebih lanjut dengan menambahkan animasi atau elemen interaktif lainnya.

Komentar

Posting Komentar

Postingan populer dari blog ini

Gambar
  Pengembangan Aplikasi Pemesanan Makanan “Kantin Bibi Ayam Goreng” Berbasis Flutter dengan Fitur Keranjang dan Integrasi WhatsApp Deskripsi Aplikasi Aplikasi Kantin Bibi Ayam Goreng adalah aplikasi pemesanan makanan digital sederhana berbasis Flutter. Tujuan aplikasi ini adalah mempermudah proses pemesanan menu makanan di lingkungan kantin dengan sistem yang cepat, praktis, dan langsung terhubung ke WhatsApp penjual. Aplikasi ini memiliki tampilan antarmuka sederhana namun modern, dilengkapi keranjang belanja, dialog konfirmasi, serta perhitungan total otomatis. Semua pemesanan dapat langsung dikirim ke WhatsApp menggunakan format pesan otomatis sehingga mempermudah penjual dalam menerima order. Tujuan Pengembangan Pengembangan aplikasi ini memiliki beberapa tujuan utama: Mengimplementasikan dasar-dasar Flutter seperti widget, state management, navigasi, dan UI layout. Membuat sistem pemesanan makanan digital yang mudah digunakan dan responsif. Menerapkan modu...
Baca selengkapnya

Arya Kegiatan Praktikum Mapel Kejuruan

Gambar
  Kegiatan Praktikum Mapel Kejuruan: Mengasah Kemampuan dan Mempersiapkan Masa Depan Pendidikan kejuruan merupakan salah satu aspek penting dalam sistem pendidikan di Indonesia. Salah satu cara terbaik untuk mempersiapkan siswa dalam menghadapi dunia kerja adalah melalui kegiatan praktikum yang dilakukan dalam mata pelajaran kejuruan. Kegiatan praktikum ini tidak hanya memberikan pengetahuan teoritis, tetapi juga keterampilan praktis yang sangat dibutuhkan di dunia profesional. Mengenal Pentingnya Praktikum dalam Mapel Kejuruan Mata pelajaran kejuruan (mapel kejuruan) di sekolah vokasi atau kejuruan memiliki fokus yang jelas pada pengembangan keterampilan teknis sesuai dengan bidang studi tertentu. Kegiatan praktikum merupakan inti dari pembelajaran kejuruan. Di sini, siswa tidak hanya belajar dari buku teks, tetapi juga mengalami langsung proses produksi atau kerja yang sesungguhnya, sesuai dengan jurusan yang mereka pilih. Misalnya, siswa jurusan teknik komputer akan berlatih mer...
Baca selengkapnya

aplikasi CRUD Flutter + MockAPI

Gambar
CRUD Flutter + MockAPI (Zapp Platform)  Pada project ini, saya membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Flutter yang terhubung dengan MockAPI sebagai backend simulasi. Aplikasi ini dibangun dan dijalankan langsung melalui platform Zapp.run, sebuah layanan cloud IDE yang mendukung proyek Flutter tanpa perlu instalasi lokal. Fitur Aplikasi: ✅ Tambah Data: Menggunakan AlertDialog yang muncul saat tombol tambah ditekan. 📝 Edit Data: Mengedit data yang sudah ada melalui tombol ikon pensil. 🗑️ Hapus Data: Menghapus data menggunakan ikon tempat sampah. 🔄 Realtime Update: Data yang diubah langsung terlihat tanpa perlu refresh manual. 🌐 Integrasi dengan MockAPI: Backend dummy untuk keperluan testing API. Teknologi yang Digunakan: Flutter 3.7.3 (Beta) MockAPI.io untuk simulasi backend Zapp.run sebagai IDE dan platform hosting sementara HTTP Package (versi 0.13.6) untuk koneksi API Cuplikan Kode: showDialog(   context: context,   builder: (con...
Baca selengkapnya