Belajar Dart & Flutter : kode Dart Flutter untuk menampilkan Row dan Column di aplikasi mobile Flutter:

Berikut ini adalah contoh kode Dart Flutter untuk menampilkan Row dan Column di aplikasi mobile Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row & Column Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                'Column Widget:',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              Column(
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Text('Item 1', style: TextStyle(fontSize: 18)),
                  SizedBox(height: 10),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Text('Item 2', style: TextStyle(fontSize: 18)),
                  SizedBox(height: 10),
                  Icon(Icons.person, size: 50, color: Colors.green),
                  Text('Item 3', style: TextStyle(fontSize: 18)),
                ],
              ),
              SizedBox(height: 40),
              Text(
                'Row Widget:',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Text('Item A', style: TextStyle(fontSize: 18)),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Text('Item B', style: TextStyle(fontSize: 18)),
                  Icon(Icons.person, size: 50, color: Colors.green),
                  Text('Item C', style: TextStyle(fontSize: 18)),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Penjelasan:

1. Column: Digunakan untuk menampilkan widget secara vertikal (berderet ke bawah). Dalam contoh ini, ada beberapa ikon dan teks yang disusun secara vertikal.
2. Row: Digunakan untuk menampilkan widget secara horizontal (berderet ke samping). Dalam contoh ini, ikon dan teks disusun berdampingan.

Cara Menjalankan:

1. Buat proyek Flutter baru menggunakan flutter create.
2. Gantikan isi file lib/main.dart dengan kode di atas.
3. Jalankan aplikasi di emulator atau perangkat fisik menggunakan flutter run.

Dengan kode ini, Anda dapat menampilkan kombinasi widget dalam Row dan Column pada aplikasi Flutter.

Berikut ini adalah penjelasan terperinci dari kode Dart Flutter yang menampilkan kombinasi Row dan Column di sebuah aplikasi:

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

• Mengimpor pustaka flutter/material.dart, yang menyediakan komponen-komponen dasar untuk membangun UI dengan Flutter berdasarkan desain material (Material Design).

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

• Fungsi main() adalah titik awal aplikasi. Di sini, fungsi runApp() dipanggil untuk menjalankan aplikasi Flutter dan memuat widget MyApp ke layar utama.

3. class MyApp extends StatelessWidget { ... }

• MyApp adalah widget utama dari aplikasi, dan itu mewarisi StatelessWidget yang berarti widget ini tidak memiliki status internal yang berubah.
• StatelessWidget digunakan saat tidak ada perubahan yang perlu dipantau, jadi UI tidak akan di-rebuild kecuali aplikasi dimulai ulang.

4. @override Widget build(BuildContext context) { ... }

• Metode build() digunakan untuk mendefinisikan struktur UI aplikasi. Setiap widget memiliki metode build yang mengembalikan hirarki widget yang harus ditampilkan pada layar.

5. MaterialApp( ... )

• MaterialApp adalah widget dasar untuk aplikasi yang menggunakan material design. Ini menyediakan tema global dan mendefinisikan layar beranda aplikasi melalui properti home.

• Properties:

  • title: Judul aplikasi.
  • theme: Mengatur tema global untuk aplikasi (misalnya, warna dasar aplikasi ditentukan oleh primarySwatch: Colors.blue).
  • home: Widget utama yang akan ditampilkan di layar, dalam hal ini adalah Scaffold.

6. Scaffold( ... )

• Scaffold adalah kerangka dasar layar untuk aplikasi Flutter yang menggunakan material design. Scaffold memberikan struktur layout yang mencakup AppBar, body, dan elemen-elemen UI lainnya.

• Properties:

  • appBar: Bagian atas layar yang berisi bilah aplikasi (AppBar).
  • body: Area utama untuk menampilkan konten aplikasi (seperti teks dan ikon).

7. AppBar( ... )

• AppBar adalah bilah alat (toolbar) di bagian atas layar.
• Properties:
  • title: Menampilkan teks sebagai judul di AppBar, dalam hal ini adalah 'Row & Column Example'.

8. Padding( ... )

• Padding adalah widget yang menambahkan jarak antara konten di dalamnya dengan tepi widget induknya.
• padding: EdgeInsets.all(16.0): Menambahkan padding dengan ukuran 16 piksel di semua sisi konten.

9. Column( ... )

• Column adalah widget yang menampilkan widget-widget anaknya secara vertikal (satu di atas yang lain).

• Properties:

  • mainAxisAlignment: MainAxisAlignment.start: Mengatur agar semua elemen dimulai dari atas (awal sumbu utama).
  • crossAxisAlignment: CrossAxisAlignment.stretch: Membuat widget anak meluas untuk memenuhi lebar maksimum di sepanjang sumbu horizontal (cross axis).
  • children: Berisi daftar widget yang akan ditampilkan di dalam kolom, seperti Text, Icon, SizedBox, dll.

10. Text( ... )

• Text adalah widget untuk menampilkan teks.
• Properties:
  • style: Menentukan gaya teks (seperti ukuran font dan ketebalan). Dalam contoh ini, teks menggunakan font berukuran 20 dan tebal (bold).

11. Icon( ... )

• Icon adalah widget untuk menampilkan ikon dari pustaka ikon bawaan Flutter, seperti Icons.star, Icons.favorite, dll.
• Properties:
  • size: Ukuran ikon.
  • color: Warna ikon.

12. SizedBox( ... )

• SizedBox digunakan untuk memberikan ukuran atau jarak khusus antara widget, dalam hal ini memberikan jarak vertikal antar elemen.
• SizedBox(height: 10): Menambahkan jarak vertikal sebesar 10 piksel antara ikon dan teks.

13. Penggunaan Column di dalam Column

• Pada bagian ini terdapat dua Column: satu untuk menampilkan judul teks 'Column Widget:' dan satu lagi untuk menampilkan ikon dan teks yang disusun secara vertikal di bawahnya (Item 1, Item 2, Item 3).

14. SizedBox(height: 40)

• Jarak tambahan 40 piksel antara bagian Column Widget dan Row Widget.

15. Row( ... )

• Row adalah widget untuk menampilkan anak-anak widget secara horizontal (berdampingan).
• Properties:
  • mainAxisAlignment: MainAxisAlignment.spaceAround: Menyebar widget secara merata di sepanjang sumbu utama dengan memberikan ruang di antara mereka.
  • children: Daftar widget yang akan ditampilkan di dalam baris, seperti ikon dan teks.

16. Kesimpulan:

• Kode ini membangun sebuah halaman sederhana yang menampilkan kombinasi Column dan Row. Pada bagian pertama, ikon dan teks disusun secara vertikal menggunakan Column, sedangkan pada bagian kedua, ikon dan teks disusun secara horizontal menggunakan Row.