Image Load

Hello world,

Dalam membuat sebuah halaman kita akan sering menemukan penggunakan Listview untuk menampilkan data ataupun untuk menyusun layout agar sesuai dengan desain yang diinginkan. Akan tetapi semakin rumit desain yang diinginkan akan mengharuskan kita menggunakan berbagai bentuk widget. Seperti contohnya kita bisa menampilkan Container yang di dalamnya berisi Row, lalu di dalam Row berisi Column atau ListView dan sebagainya. Pada awal mula saya mempelajari Flutter saya juga agak kesulitan untuk membuat desain layout yang rumit. Itu dikarenakan setiap kali saya memasukkan ListView di dalam ListView maka akan terjadi error. Begitu juga jika kita memasukkan ListView di dalam Column. 

Lalu bagaimana solusinya? Ada widget bernama Slivers yang sebenarnya bisa mengakomodir kebutuhan itu. Tapi karena bentuknya dan penggunaannya yang sedikit berbeda maka saya jarang menggunakannya. Akhirnya saya menemukan solusi yang paling simpel yaitu dengan tetap menggunakan ListView di dalam ListView dengan menambahkan beberapa attribute. Ternyata memang ListView memiliki beberapa attribute untuk mengatasi masalah tersebut. Oke mari kita lihat contoh di bawah ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "Halaman",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman Demo'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 1"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 3"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 4"),
),

],
),
),
);
}
}

Pada contoh di atas ada sebuah listview yang memiliki empat item.

Preview:



Kemudian kita coba buat listview baru di dalamnya seperti berikut.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "Halaman",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman Demo'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 1"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2"),
),
Container(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2.1"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2.2"),
),
],
),
),

Container(
padding: EdgeInsets.all(10.0),
child: Text("List 3"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 4"),
),
],
),
),
);
}
}

Dengan menambahkan code di atas maka akan muncul error yang  biasanya seperti di bawah. Kenapa begitu? Menurut saya ini dikarenakan ListView kedua yang tidak memiliki height/ketinggian yang pasti yang mempengaruh ketinggian dari ListView pertama.

I/flutter (28112): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter (28112): The following assertion was thrown during performResize():
I/flutter (28112): Vertical viewport was given unbounded height.
I/flutter (28112): Viewports expand in the scrolling direction to fill their container. In this case, a vertical
I/flutter (28112): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (28112): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (28112): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (28112): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (28112): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size

Lalu solusinya bagaimana? Simpel sebenarnya. Kita tinggal menambahkan kode berikut ke dalam ListView kedua.

shrinkWrap: true,

Sehingga full codenya akan menjadi seperti berikut.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "Halaman",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman Demo'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 1"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2"),
),
Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2.1"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 2.2"),
),
],
),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 3"),
),
Container(
padding: EdgeInsets.all(10.0),
child: Text("List 4"),
),
],
),
),
);
}
}

Preview :



Selamat mencoba :)