penggunaan widget pada flutter

Perubahan Layout dan Penggunaan Widget pada Flutter

Dalam pengembangan antarmuka aplikasi menggunakan Flutter, pemilihan widget layout dan pengaturan komponen sangat berpengaruh terhadap tampilan akhir aplikasi. Pada contoh ini dilakukan beberapa penyesuaian widget, yaitu penggunaan AppBar, perubahan layout dari Column ke Row, serta penambahan Padding dan SizedBox.

AppBar

AppBar merupakan bagian atas aplikasi yang berfungsi sebagai penanda halaman dan tempat menampilkan judul aplikasi. Pada kode ini, AppBar menampilkan judul “Zaky - Latihan” serta menggunakan warna latar Color.fromRGBO(45, 62, 80, 1). Pengaturan warna ini bertujuan untuk memberikan identitas visual yang konsisten dan membuat tampilan aplikasi lebih menarik.

Perubahan dari Column ke Row

Awalnya, widget Column digunakan untuk menyusun elemen secara vertikal dari atas ke bawah. Namun, untuk menampilkan beberapa teks dalam satu baris secara sejajar, Column kurang sesuai. Oleh karena itu, layout diganti menggunakan Row yang menyusun widget secara horizontal dari kiri ke kanan.

Penggunaan Row membuat tampilan menjadi lebih ringkas dan sesuai dengan kebutuhan desain yang membutuhkan susunan horizontal.

Padding

Widget Padding digunakan untuk memberikan jarak di sekeliling widget yang dibungkusnya. Pada kode ini, salah satu widget Text dibungkus dengan Padding menggunakan EdgeInsets.all(10.0). Tujuannya adalah agar teks tidak terlalu rapat dengan widget lain dan tampilan menjadi lebih rapi.

Berbeda dengan SizedBox yang memberikan jarak kosong antar widget, Padding memberikan ruang di dalam area widget itu sendiri.

SizedBox

SizedBox digunakan untuk mengatur jarak antar widget di dalam Row. Dengan menentukan nilai width, SizedBox menciptakan ruang kosong secara horizontal sehingga elemen tidak saling berhimpitan dan lebih mudah dibaca.

Kode Program Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Zaky - Latihan'),
          backgroundColor: Color.fromRGBO(45, 62, 80, 1),
        ),
        body: Row(
          children: const [
            Text(
              'Teks',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(width: 10),
            Padding(
              padding: EdgeInsets.all(10.0),
              child: Text(
                'Teks',
                style: TextStyle(fontSize: 18),
              ),
            ),
            SizedBox(width: 10),
            Text(
              'Teks',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

Kesimpulan

Penggunaan AppBar memberikan identitas pada halaman aplikasi. Perubahan layout dari Column ke Row dilakukan untuk mengatur susunan widget secara horizontal. Padding digunakan untuk memberikan jarak di dalam widget, sedangkan SizedBox digunakan untuk mengatur jarak antar widget. Kombinasi widget ini menghasilkan tampilan yang lebih rapi dan terstruktur.