Pengenalan User Interface Widget ROW, Column

Didalam flutter tentu kita bakalan sering menggunakan widget row dan column ini. Untuk pemahaman terhadap widget column dan row akan saya jelaskan pada berikut ini :

Widget Row

Widget row akan menyusun komponen-komponen yang terdapat didalamnya dengan sususnan horizontal. Perhatikan pada gambar dibawah ini :

text 1, text 2, text 3, text 4 terletak pada posisi secara horizontal/mendatar. untuk mengatur tersebut dibungkus dengan menggunakan widget row. Untuk memasukan text tersebut kedalam widget row kita dapat menggunakan kode berikut :

Row(

          children: <Widget>[

            // Komponen 1,

            // Komponen 2,

            // Komponen 3,

            // Komponen 4,

          ],

didalam childrennya kita dapat memasukan beberapa widget sekaligus, dikarenakan didalam children dibungkus menggunakan array. 

contoh pada aplikasi dapat menggunakan source code berikut ini :

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("Latihan ROW"),

        ),

        body: Row(

          children: <Widget>[

            Text("Text 1"),

            Text("Text 2"),

            Text("Text 3"),

            Text("Text 4")

          ],

        ),

      ),

    );

  }

}

Hasil dari source code tersebut adalah :

terlihat text 1 text 2 text 3 text 4 tersusun secara mendatar, kita juga dapat mengatur tata letak widget tersebut, disini kita akan mengatur tata letak komponen yang ada ke tengah. Pada widget row/ column itu sendiri ada namanya properti yang namanya  mainAxisAlignment , properti ini tertugas untuk mengatur tata letak widget, jika kita ingin mengatur tata letaknya ke tengah kita dapat menggunakan code berikut 

 mainAxisAlignment: MainAxisAlignment.center,

kalau kita melakukan pemasangan properti ini kedalam widget row/column maka letak widget tersebut akan berada di tengah-tengah. sedangkan untuk mainAxisAlignment itu sendiri memiliki beberapa method  dapat dilihat pada gambar berikut ini :

Method yang ada didalam mainAxisAlignment tersebut memiliki fungsi sebagai berikut :

center

berfungsi untuk mengatur tata letak ketengah

end

berfungsi untuk memposisikan komponen pada bagian ujung posisi utama, kanan untuk baris, bawah untuk kolom

spaceAround

hampir miri dengan spaceEvenly, tetap[i mengurani setengah dari ruang sebelum komponen pertama dan setelah komponen terakhir menjadi setengah dari lebar setiap komponen

spaceBetween

berfungsi untuk membagi ruang secara merata pada setiap komponen

spaceEvenly

berfungsi untuk memberikan jarak antar kompen

start

berfungsi untuk memposisikan komponen pada bagian permulaan posisi utama, Kiri untuk baris, atas untuk kolom

pada contoh dapat kita lihat pada source code berikut :

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("Latihan ROW"),

        ),

        body: Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text("Text 1"),

            Text("Text 2"),

            Text("Text 3"),

            Text("Text 4")

          ],

        ),

      ),

    );

  }

}

Hasil :

jika methodnya saya ganti menjadi spaceEvenly maka hasilnya adalah :

sekarang silahkan coba dari setiap method yang ada.

Widget Column

widget column ini sama dengan widget row, hanya pemanggilannya saja yang berbeda. pada widget column ini, akan memposisikan komponen secara vertikal. kita lihat pada code berikut :

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("Latihan Column"),

        ),

        body: Column(

          children: <Widget>[

            Text("Text 1"),

            Text("Text 2"),

            Text("Text 3"),

            Text("Text 4")

          ],

        ),

      ),

    );

  }

}

Hasilnya 

jika kita berikan properti mainAxisAlignment  center, maka hasilnya akan seperti ini :

begitu juga dengan method mainAxisAlignment  yang lainnya.

Sekarang kita sudah memahami bagaimana widget row dan column tersebut digunakan, mungkin timbul pertanyaan, apakah bisa row dan column tersebut digabungkan ?

jawabannya : tentu itu bisa kita gabungkan. caranya cukup mudah kita mau mengabungkan column ke dalam row atau row kedalam column ?

pada contoh ini saya akan mengabungkan row ke dalam column :

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("Latihan Column"),

        ),

        body: Column(

          children: [

            Text("Text 1"),

            Text("Text 2"),

            Text("Text 3"),

            Text("Text 4"),

            Row(

              children: [

                Text("Text 5"),

                Text("Text 6"),

                Text("Text 7"),

                Text("Text 8")

              ],

            )

          ],

        ),

      ),

    );

  }

}

Hasilnya

pada contoh code tersebut, kita sudah dapat memasukan row kedalam column, bagaimana cukup mudah bukan. Disini kita sudah mempelajari 2 buah widget row dan column.