Eksperimen Layout Dasar Flutter


https://zapp.run/edit/flutter-zia406utia50?entry=lib/main.dart&file=lib/main.dart



https://zapp.run/edit/flutter-zvl8067rvl90?entry=lib/main.dart&file=lib/main.dart

🧑‍💻 Belajar Flutter: Perbedaan Penggunaan Row dan Column pada Widget Text

Flutter merupakan framework populer dari Google yang digunakan untuk membangun aplikasi mobile dengan tampilan yang menarik dan responsif. Pada kesempatan kali ini, saya mencoba membuat latihan Flutter sederhana dengan fokus pada penggunaan widget Row dan Column untuk mengatur tata letak teks di layar aplikasi.

Aplikasi ini menggunakan AppBar sederhana dengan judul “Azzura Latihan Flutter” serta warna biru muda yang memberi kesan bersih dan nyaman dilihat.

📱 Tampilan Kedua: Menggunakan Widget Row

Pada contoh kedua, saya menggunakan widget Row untuk menampilkan beberapa widget Text secara horizontal atau berjajar ke samping.

Dengan bantuan properti mainAxisAlignment: MainAxisAlignment.spaceEvenly, setiap teks akan memiliki jarak yang sama sehingga tampil rapi dan seimbang. Desain ini cocok digunakan untuk menampilkan menu singkat, label, atau informasi yang ingin ditampilkan dalam satu baris.

Beberapa poin penting dari tampilan ini:

  • Widget Row digunakan untuk susunan mendatar

  • Teks berada di tengah layar dengan Center

  • Warna teks menggunakan gradasi biru agar terlihat lebih hidup

  • Tampilan sederhana namun tetap enak dilihat

Contoh ini sangat cocok bagi pemula yang ingin memahami cara kerja layout horizontal di Flutter.

📱 Tampilan Pertama: Menggunakan Widget Column

Pada contoh pertama, saya menggunakan widget Column untuk menyusun widget Text secara vertikal dari atas ke bawah.

Dengan menambahkan SizedBox, jarak antar teks menjadi lebih teratur dan tidak terlalu rapat. Selain itu, penggunaan crossAxisAlignment: CrossAxisAlignment.start membuat teks rata kiri, sehingga tampilan terlihat lebih formal dan cocok untuk konten deskriptif.

Keunggulan dari tampilan ini antara lain:

  • Widget Column untuk susunan vertikal

  • Cocok untuk menampilkan konten bertahap

  • Tampilan lebih rapi untuk teks panjang

  • Sangat sering digunakan dalam aplikasi Flutter sehari-hari

🎨 Desain dan Tema Aplikasi

Kedua contoh menggunakan:

  • AppBar berwarna biru langit

  • Latar belakang putih

  • Tema Colors.lightBlue agar tampilan konsisten

  • Desain minimalis dan ramah untuk pemula

Dengan desain seperti ini, aplikasi terlihat sederhana namun tetap profesional.

📌 Kesimpulan

Dari dua contoh di atas, dapat disimpulkan bahwa:

  • Row digunakan untuk menyusun widget secara horizontal

  • Column digunakan untuk menyusun widget secara vertikal

  • Keduanya merupakan widget dasar yang sangat penting dalam Flutter

  • Dengan kombinasi warna dan padding yang tepat, tampilan sederhana bisa terlihat lebih menarik

Latihan kecil seperti ini sangat membantu untuk memahami dasar-dasar Flutter sebelum melangkah ke tampilan yang lebih kompleks.

✨ Penutup

Semoga latihan Flutter sederhana ini dapat membantu teman-teman yang sedang belajar Flutter, khususnya dalam memahami perbedaan penggunaan Row dan Column. Jangan ragu untuk terus mencoba dan mengembangkan tampilan aplikasi agar semakin menarik.

Komentar

Posting Komentar

Postingan populer dari blog ini

ARTIKEL PENGEMBANGAN GIM

Gambar
ARTIKEL 1:  PANDUAN LENGKAP MEMULAI PENGEMBANGAN GIM UNTUK PEMULA Mengapa Perkembangan Industri Gim Terus Meningkat? Industri gim global telah berkembang pesat dalam dekade terakhir, dengan nilai pasar yang diperkirakan mencapai $200 miliar pada tahun 2023. Pertumbuhan ini tidak hanya didorong oleh kemajuan teknologi, tetapi juga oleh demokratisasi tools pengembangan gim yang membuat siapa pun bisa menjadi developer. Artikel ini akan membimbing Anda melalui langkah-langkah dasar memulai perjalanan pengembangan gim. Langkah 1: Memilih Genre dan Platform yang Tepat Pemilihan Genre - Casual Games: Cocok untuk pemula, contoh: puzzle, match-3 - Mobile Games: Pasar luas, development cycle singkat - Indie Games: Fokus pada cerita dan gameplay unik Pemilihan Platform - Mobile: Unity, Unreal Engine, Godot - PC/Console: Unreal Engine, Unity, CryEngine - Web: Phaser.js, Babylon.js, Three.js -Langkah 2: Tools dan Software yang Direkomendasikan Game Engine Populer: 1. Unity (C#)    - ...
Baca selengkapnya

Membuat Halaman Data Kelompok Belajar dengan Flutter dan Dart

Gambar
 Judul: Membuat Halaman Data Kelompok Belajar dengan Flutter dan Dart Isi Artikel: Flutter adalah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi mobile, web, dan desktop dengan satu basis kode. Dalam artikel ini, saya akan berbagi contoh sederhana bagaimana membuat halaman data kelompok belajar menggunakan Flutter dan Dart. 📌 Fitur yang Dibuat 1. Bagian atas menampilkan nama kelompok. 2. Menampilkan foto anggota kelompok lengkap dengan data: Nama Nomor Absen Alamat kelas hobby no hp 3. Di bagian bawah terdapat sebuah tombol. Jika ditekan, akan muncul popup ucapan terima kasih. Hasil yang Diharapkan Dengan kode di atas, aplikasi akan menampilkan: Nama kelompok di bagian atas. Daftar anggota dengan foto dan data lengkap. Tombol di bagian bawah yang menampilkan popup ucapan terima kasih. contoh kode: import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({super.key}); ...
Baca selengkapnya