Tugas Pertemuan 4 adalah membuat halaman dengan kombinasi antara row dan column, tampilan ini mitip seperti ketika menampilkan katalog produk tipe Grid, namun lebih sederhana lagi. Ikuti langkah langkah berikut ini:

Buat file main.dart

import 'package:flutter/material.dart';
import 'baris_kolom.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'BarisKolom',
      home: BarisKolom(),        
    );
  }
}

Buat file baris_kolom.dart

import 'package:flutter/material.dart';

class baris_kolom extends StatelessWidget {
  const baris_kolom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Baris dan Kolom")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Text("Baris 1, Kolom 1 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 1, Kolom 2 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 1, Kolom 3 "),
            ],
          ),
          SizedBox(
            height: 30,
          ),
          Row(
            children: [
              Text("Baris 2, Kolom 1 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 2, Kolom 2 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 2, Kolom 3 ")
            ],
          ),
          SizedBox(
            height: 30,
          ),
          Row(
            children: [
              Text("Baris 3, Kolom 1 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 3, Kolom 2 "),
              SizedBox(
                width: 20,
              ),
              Text("Baris 3, Kolom 3 "),
            ],
          ),
        ],
      ),
    );
  }
}

Skrip diatas sudah dapat menampilkan hasil sesuai tugas yang diberikan, namun hasilnya masih kurang sesuai dan berpengaruh ke hasil render yang menunjukan adanya kesalahan lebar layar.

Coba buat lagi perbandingan dengan file ke 2 dengan hasil yang lebih baik

Buat file kolom_baris2.dart

import 'package:flutter/material.dart';

class baris_kolom2 extends StatelessWidget {
  const baris_kolom2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Baris dan Kolom")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: _buildRows(),
      ),
    );
  }

  List _buildRows() {
    List rows = [];

    for (int i = 1; i <= 3; i++) {
      rows.add(_buildRow(i));
      rows.add(SizedBox(height: 30)); // Menambahkan jarak antar baris
    }

    return rows;
  }

  Widget _buildRow(int rowNumber) {
    List columns = [];

    for (int i = 1; i <= 3; i++) {
      columns.add(_buildCell(rowNumber, i));
      if (i < 3)
        columns.add(SizedBox(
            width:
                20)); // Menambahkan jarak antar kolom kecuali untuk kolom terakhir
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: columns,
    );
  }

  Widget _buildCell(int rowNumber, int columnNumber) {
    return Text("Baris $rowNumber, Kolom $columnNumber");
  }
}

Skrip tersebut adalah sebuah widget Flutter yang menggunakan `Column`, `Row`, dan `Text` untuk membuat tata letak berbasis baris dan kolom dengan teks yang ditampilkan di setiap sel. Berikut adalah penjelasan lebih detailnya:

1. **BarisKolom2 Class**: Ini adalah sebuah stateless widget yang merupakan bagian dari aplikasi Flutter. Widget ini digunakan untuk menampilkan tata letak berbasis baris dan kolom dengan teks di setiap sel.

2. **build Method**: Ini adalah metode yang diwarisi dari kelas `StatelessWidget` dan digunakan untuk merender tampilan widget. Di dalamnya, `Scaffold` digunakan sebagai kerangka tampilan utama, dengan `AppBar` di bagian atas dan `body` di bawahnya.

3. **Column**: Ini adalah widget yang digunakan untuk menempatkan anak-anaknya dalam satu kolom secara vertikal. Properti `mainAxisAlignment` diatur ke `spaceEvenly` agar ruang kosong didistribusikan secara merata di antara anak-anak.

4. **_buildRows Method**: Ini adalah metode yang mengembalikan daftar widget yang mewakili setiap baris dalam tata letak. Dalam metode ini, kita menggunakan perulangan untuk membuat tiga baris dengan memanggil `_buildRow` untuk setiap baris, dan menambahkan `SizedBox` di antara setiap baris untuk menambahkan jarak.

5. **_buildRow Method**: Ini adalah metode yang mengembalikan widget yang mewakili satu baris dalam tata letak. Di dalamnya, kita menggunakan perulangan untuk membuat tiga kolom dengan memanggil `_buildCell` untuk setiap kolom, dan menambahkan `SizedBox` di antara setiap kolom untuk menambahkan jarak kecuali untuk kolom terakhir.

6. **_buildCell Method**: Ini adalah metode yang mengembalikan widget yang mewakili satu sel dalam tata letak. Di sini, kita hanya menampilkan teks yang mencakup nomor baris dan kolom.

Dengan menggunakan pendekatan ini, kita bisa membuat tata letak yang lebih dinamis dan mudah diubah, terutama jika kita ingin menambahkan lebih banyak baris atau kolom di masa depan.

Penulis: Ade Suryadi

Tanggal: 23 April 2024