Card image cap
[Flutter][8] Menampilkan Widget Secara Horizontal Menggunakan Row Widget
Friday, 22 Feb 2019

Hello world,

Kali ini saya akan membahas mengenai bagaimana membuat widget secara horizontal. Seperti pada tampilan aplikasi-aplikasi seperti gojek, bukalapak, tokped dll menggunakan kotak berjajar menyamping untuk menampilkan kategori produknya. Di bawah ini saya coba menggambarkan contoh simpelnya.

Untuk membuatnya kita memerlukan widget row. Penggunaannya bisa dilihat pada contoh di bawah ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
child: new Row(
children: <Widget>[
new Icon(Icons.home, size: 70.0,),
new Icon(Icons.people, size: 70.0,),
new Icon(Icons.search, size: 70.0,)
],
),
),
);
}
}

Dari contoh di atas akan menampilkan icon yang berjajar ke samping. Kita juga bisa menambahkan mainAxisAlignment untuk mengatur alignment-nya. Lihat contoh di bawah.

body: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.home, size: 70.0,),
new Icon(Icons.people, size: 70.0,),
new Icon(Icons.search, size: 70.0,)
],
),
),

Pilihannya ada beberapa seperti:

1. center -> posisi di tengah

2. start -> rata kiri

3. end -> rata kanan

4. spaceAround -> memberi ruang (margin) yang sama lebarnya pada tiap-tiap children

5. spaceBetween -> memberi ruang di antara children saja


Kita juga dapat menambahkan container pada tiap-tiap children untuk mengatur stylenya seperti padding, margin, background dll seperti contoh di bawah ini.

body: new Container(
child: new Row(
children: <Widget>[
new Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.home, size: 70.0, color: Colors.white,),
),
new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.people, size: 70.0,),
),
new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.search, size: 70.0,)
),
],
),
),


Oke mungkin itu saja untuk pembahasan kali ini. Selebihnya nanti akan saya buat pembahasan khusus dalam tulisan dan video dengan topik yang menggunakan studi kasus jadi bisa lebih mudah dibayangkan hasilnya.  

Selamat mencoba :)