Flutter: Membuat Layout dengan Row dan Column

Selesai bermain dengan application title dan warna background. Mari kita mulai belajar membuat layout di flutter dengan menggunakan Row dan Column.

Konsep row dan column pada flutter mirip-mirip dengan konsep row dan column pada tabel dan excel. Row dan column seumpama sebuah wadah yang bisa di isi oleh beberapa widget, karena merupakan multiple children widget (bisa menampung beberapa children). Bedanya row dan column adalah pada cara menampilkan widget tersebut.

Pada gambar di atas kotak-kotak merah adalah widget-widget container dan kotak biru adalah widget row dan column. Ketika kita mempunyai 3 buah container ditampilkan sebagai children row maka akan ditampilkan menyamping. Sedangkan jika ditampilkan sebagai children column maka akan ditampilkan ke bawah.

Dari project di artikel sebelumnya, bagian yang akan kita ubah adalah bagian body.

Pertama kita akan mencoba menampilkan 3 buah icon menyamping dengan menggunakan row.

body: new Center(

          child: new Container(

        color: Colors.yellowAccent,

        width: 225.0,

        height: 75.0,

        child: new Row(

          children: <Widget>[

            new Icon(Icons.computer, size: 75.0),

            new Icon(Icons.radio, size: 75.0),

            new Icon(Icons.phone, size: 75.0),

          ],

        ),

      )),

Save dan hot reload hasilnya:

Sekarang kita coba membuat layout column, yang akan Rani ubah adalah ukuran width dan height containter dan dari widget row menjadi widget column.

body: new Center(

          child: new Container(

        color: Colors.yellowAccent,

        width: 75.0,

        height: 225.0,

        child: new Column(

          children: <Widget>[

            new Icon(Icons.computer, size: 75.0),

            new Icon(Icons.radio, size: 75.0),

            new Icon(Icons.phone, size: 75.0),

          ],

        ),

      )),

Saat save dan hot reload hasilnya:

Penggunaan row dan column juga bisa dikombinasikan sehingga membentuk tabel. Sebagai contoh Rani mengubah code menjadi sebagai berikut:

    body: new Center(

          child: new Container(

        color: Colors.yellowAccent,

        width: 225.0,

        height: 225.0,

        child: new Column(

          children: <Widget>[

            new Row(

              children: <Widget>[

                new Icon(Icons.computer, size: 75.0),

                new Icon(Icons.radio, size: 75.0),

                new Icon(Icons.phone, size: 75.0),

              ],

            ),

            new Row(

              children: <Widget>[

                new Icon(Icons.computer, size: 75.0, color: Colors.red),

                new Icon(Icons.radio, size: 75.0, color: Colors.red),

                new Icon(Icons.phone, size: 75.0, color: Colors.red),

              ],

            ),

            new Row(

              children: <Widget>[

                new Icon(Icons.computer, size: 75.0, color: Colors.blue),

                new Icon(Icons.radio, size: 75.0, color: Colors.blue),

                new Icon(Icons.phone, size: 75.0, color: Colors.blue),

              ],

            ),

          ],

        ),

      )),

Children dari column berupa 3 buah row yang masing-masing row memiliki 3 buah icon. Rani juga bedakan warna nya per row agar bisa dilihat yang mana row tersebut.

Hasilnya sebagai berikut: