Program Dart untuk membuat layout baris dan kolom di Flutter menggunakan widget Row dan Column

Berikut adalah contoh program Dart untuk membuat layout baris dan kolom di Flutter menggunakan widget Row dan Column. Ini adalah struktur dasar untuk menata elemen di dalam aplikasi Flutter.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Darsu Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,  // Posisi elemen di Column
            crossAxisAlignment: CrossAxisAlignment.center, // Posisi elemen di sepanjang sumbu horizontal
            children: <Widget>[
              Text('Ini adalah kolom 1'),
              Text('Ini adalah kolom 2'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround, // Menyebar elemen di Row
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Icon(Icons.home, size: 50, color: Colors.green),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 3')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Penjelasan:

1. Column: Menyusun elemen secara vertikal (dari atas ke bawah).
   • mainAxisAlignment digunakan untuk mengatur penempatan elemen di sepanjang sumbu utama (vertikal).
   • crossAxisAlignment mengatur penempatan elemen di sumbu lain (horizontal).
2. Row: Menyusun elemen secara horizontal (dari kiri ke kanan).
   • mainAxisAlignment mengatur jarak antar elemen di sepanjang sumbu utama (horizontal).

Jika program ini dijalankan di aplikasi Flutter, Anda akan melihat teks diatur dalam kolom, dan ikon serta tombol ditempatkan di baris secara horizontal.

Berikut adalah penjelasan terperinci dari kode Flutter yang telah diberikan:

1. Import Library

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

Kode ini mengimpor paket Flutter yang berisi widget Material. Material adalah desain antarmuka yang menyediakan elemen-elemen UI modern seperti tombol, teks, dan ikon yang sesuai dengan standar Material Design dari Google.

2. Fungsi main

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

Fungsi main() adalah titik masuk dari aplikasi. Fungsi ini menjalankan aplikasi Flutter dengan menjalankan MyApp() sebagai widget utama.

3. Kelas MyApp

dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Darsu Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,  
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('Ini adalah kolom 1'),
              Text('Ini adalah kolom 2'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Icon(Icons.home, size: 50, color: Colors.green),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 3')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

a. Kelas MyApp

MyApp adalah kelas turunan dari StatelessWidget. Ini berarti widget ini tidak dapat diubah (immutable) dan tidak memiliki state yang berubah selama masa hidupnya. StatelessWidget biasanya digunakan ketika UI aplikasi tidak perlu berubah setelah widget di-render.

b. Method build

Method build bertanggung jawab untuk membangun UI dari widget. Ia menerima BuildContext sebagai parameter, yang digunakan untuk menyimpan informasi terkait pohon widget dan berbagai aspek lingkungan aplikasi.

c. MaterialApp

dart
MaterialApp(
  home: Scaffold(
    ...
  )
)

MaterialApp adalah widget inti yang membungkus seluruh aplikasi dan memberikan desain material. Di sini, properti home digunakan untuk menentukan widget utama yang ditampilkan saat aplikasi diluncurkan, yaitu Scaffold.

d. Scaffold

Scaffold adalah widget tata letak dasar di Flutter yang menyediakan struktur antarmuka standar dengan komponen seperti AppBar (baris atas), Body (konten utama), dan FloatingActionButton.

e. AppBar

dart
AppBar(
  title: Text('Darsu Row dan Column'),
)

AppBar adalah bagian dari Scaffold yang berfungsi sebagai baris atas atau header aplikasi. Di sini, kita menetapkan title menggunakan widget Text yang menampilkan teks "Contoh Row dan Column".

f. Body (Konten Utama)

dart
body: Padding(
  padding: const EdgeInsets.all(16.0),
  child: Column(
    ...
  ),
)

Bagian body dari Scaffold berisi konten utama aplikasi. Di sini, widget Padding digunakan untuk memberikan jarak di sekitar widget anaknya dengan padding sebesar 16 piksel pada semua sisi. Padding membungkus widget Column.

g. Column

dart
Column(
  mainAxisAlignment: MainAxisAlignment.start,  
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    ...
  ],
)

Column adalah widget tata letak yang menyusun anak-anaknya secara vertikal (dari atas ke bawah). Dua properti penting dari Column:

• mainAxisAlignment: Mengatur posisi elemen-elemen di sepanjang sumbu utama (vertikal). Dalam kasus ini, MainAxisAlignment.start menempatkan elemen di bagian atas.
• crossAxisAlignment: Mengatur posisi elemen di sumbu sekunder (horizontal). CrossAxisAlignment.center menempatkan elemen di tengah secara horizontal.

h. Text Widgets

dart
Text('Ini adalah kolom 1'),
Text('Ini adalah kolom 2'),

Dua widget Text ini digunakan untuk menampilkan teks sederhana "Ini adalah kolom 1" dan "Ini adalah kolom 2".

i. Row untuk Ikon

dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.blue),
    Icon(Icons.favorite, size: 50, color: Colors.red),
    Icon(Icons.home, size: 50, color: Colors.green),
  ],
)

Row adalah widget tata letak yang menyusun anak-anaknya secara horizontal (dari kiri ke kanan). Properti:

• mainAxisAlignment: MainAxisAlignment.spaceAround akan mendistribusikan ruang secara merata di antara ikon dan di kedua ujung baris.

Anak-anak dari Row adalah tiga widget Icon dengan ikon bintang, hati, dan rumah, yang masing-masing diberi warna dan ukuran tertentu.

j. Row untuk Tombol

dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
    ElevatedButton(onPressed: () {}, child: Text('Button 3')),
  ],
)

Row ini mengandung tiga tombol yang disusun secara horizontal:

• mainAxisAlignment: MainAxisAlignment.spaceEvenly akan membagi ruang secara merata di antara tombol-tombol.

Setiap ElevatedButton memiliki onPressed yang kosong (tanpa aksi) dan menampilkan teks yang berbeda.

4. Kesimpulan

Kode ini membuat aplikasi Flutter sederhana yang menampilkan layout dengan elemen-elemen yang diatur secara vertikal dan horizontal. Column mengatur teks dan dua Row di bawahnya, satu berisi ikon, dan yang lain berisi tombol.