Belajar Cara Mengatur Layout (Row dan Column) pada Flutter

Oleh Wildan M Athoillah 23.40

Assalamualaikum Warahmatullahi Wabarakatuh.

Mengatur tatatak atau layout pada User Interface sangatlah penting untuk kenyamanan pengguna saat menggunakan aplikasi yang kita buat, Mempunyai user interface yang bagus dan rapi pastinya menjadi kebanggaan tersendiri untuk developernya dan juga penggunanya, salah satu widget yang paling penting dalam flutter untuk menyusun user interface, yaitu Row dan Column.

Row dan Column mempunyai peranan seperti LinearLayout, kalo di Android Studio atau aplikasi semacamnya. Row digunakan untuk menyusun widget secara Horizontal, sedangkan Column digunakan untuk menyusun widget secara Vartical.

Materi yang harus kalian pelajari sebelumnya:

Pada widget tersebut kita juga dapat mengatur propertiesnya, seperti padding, margin, alignment,dll. Dengan menggunakan Flutter, kita dapat dengan mudah dan cepat untuk mengatur semua itu. Pada tutorial ini kita akan belajar membuat project sederhana yang menampilkan susunan widget secara Horizontal dan Vertical serta mengatur propertiesnya.

Belajar Cara Mengatur Layout (Row dan Column) pada Flutter

A.Widget Row

1) Buka Aplikasi Visual Studio Code kalian, buat project baru, berinama project tersebut, lalu simpan pada lokasi yang diinginkan.

2) Setiap widget yang kita buat didalam Row, akan tersusun secara Horizontal, untuk itu kita menggunakan atribut children, yaitu atribut turunan dari widget Row, berbeda dengan atribut child yang hanya dapat membuat satu widget saja, atribut children dapat membuat beberapa widget. Contohnya seperti berikut ini.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        //Membuat Widget AppBar
        appBar: new AppBar(
          //Menambahkan TitleBar
          title: new Text('Belajar Flutter'),
        ),

        body: new Center(
          //Menambahkan widget Row sebagai anak dari widget Center
          child: new Row(
            //Digunakan agar widget mengisi ruang kosong pada layar
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Icon(Icons.apps, color: Colors.red[900], size: 40.0),
              new Icon(Icons.android, color: Colors.red[900], size: 40.0),
              new Icon(Icons.camera_alt, color: Colors.red[900], size: 40.0),
            ],
          ),
        ),
      ),
    );
  }
}

Pada contoh program yang kita buat, pertama kita menempatkan Row kedalam widget Center, supaya tampil ditengah layar, selanjutnya kita tambahkan atribut mainAxisAligment lalu kita set menjadi speceEvenly, agar setiap widget didalam Row tampil tanpa menghamburkan ruang kosong pada layar, artinya jarak antara widget satu dengan widget lainnya akan tersusun dengan rapi, menyesuaikan ukuran layar.

Didalam Row kita coba menambahkan 3 buah widget Icon, lalu kita ubah artibutnya seperti warna menjadi merah, dan ukurannya kita set menjadi 40.0.

Demo:

Selain speceEvenly terdapat beberapa atribut lainnya yang dapat kalian coba, seperti speceBeetwen, speceAround, dll.

B.Widget Column

Widget Column digunakan untuk menyusun widget turunannya secara Vertical, pada contoh berikut ini misalnya kita membuat beberapa widget Text kedalam Column, Seperti ini.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        //Membuat Widget AppBar
        appBar: new AppBar(
          //Menambahkan TitleBar
          title: new Text('Belajar Flutter'),
        ),

        body: new Center(
          //Menambahkan widget Row sebagai anak dari widget Center
          child: new Column(
            //Digunakan agar widget mengisi ruang kosong pada layar
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Text('Wildan M Athoillah', 
              style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
              new Text('Cianjur Apps Developer', 
              style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
              new Text('WILDAN TECHNO ART', 
              style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
            ],
          ),
        ),
      ),
    );
  }
}

Hampir sama seperti pada project yang sebelumnya, kita tinggal menghubah Row menjadi Column dan mengganti widget didalamnya dan jangan lupa kita juga masih menggunakan atribut MainAxisAligment.speceEvenly, agar setiap widget didalamnya mempunyai jarak yang pas.

Demo:

C.Widget Row dan Column

Terakhir kita akan coba menggabungkan kedua widget tersebut, pada contoh program berikut ini, kita akan mengklaborasikan widget Icon dengan Text, yang nantinya masing-masing Icon tersebut mempunyai labelnya sendiri. Seperti pada gambar berikut ini.

Demo:

Pertama kita perlu membuat Widget Row sebagai Induknya, lalu didalmnya kita buat 3 buah widget Column, masing-masing widget column tersebut mempunyai 2 buah widget anak, yaitu Icon dan Text. Lalu pada masing-masing Column kita tambahkan atribut mainAxisAlignment: MainAxisAlignment.center, agar setiap Column berada ditengah layar.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        //Membuat Widget AppBar
        appBar: new AppBar(
          //Menambahkan TitleBar
          title: new Text('Belajar Flutter'),
        ),

        body: new Row(
          //Digunakan agar widget mengisi ruang kosong pada layar
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            //Widget Pertama
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.apps, color: Colors.red[900], size: 40.0),
                new Text('Aplikasi'),
              ],
            ),
            //Widget Keuda
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.android, color: Colors.red[900], size: 40.0),
                new Text('Android'),
              ],
            ),
            //Widget Ketiga
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.call, color: Colors.red[900], size: 40.0),
                new Text('Panggilan'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.