Card image cap

[Flutter][12] Membuat ListView (Custom)
Monday, 25 Feb 2019

Hello world,

Pembahasan kali ini melanjutkan pembahasan sebelumnya yaitu tentang ListView. Sebelumnya kita membuat listview sederhana atau versi basicnya. Lalu seperti apa dan bagaimana listview versi custom yang dimaksud di sini? Kita bisa lihat contohnya pada aplikasi instagram, facebook, twitter yang memiliki tampilan list berbeda-beda. Nah selanjutnya kita bisa perhatikan pada contoh dari post sebelumnya, pada tiap-tiap list kita menggunakan ListTile yang akhirnya terbentuklah list pada umunmnya. Nah kali ini kita akan membuat List item tanpa menggunakan ListTile.

Langsung saja saya beri contoh versi yang saya buat seperti 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: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: new Icon(Icons.home, color: Colors.white, size: 50.0,),
),
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 100.0,
color: Colors.blue[200],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Artikel 1", style: TextStyle(color: Colors.white, fontSize: 15.0)),
Text("Ini adalah contoh artikel pada listview dengan versi custom", style: TextStyle(color: Colors.white),)
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: new Icon(Icons.home, color: Colors.white, size: 50.0,),
),
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 100.0,
color: Colors.blue[200],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Artikel 2", style: TextStyle(color: Colors.white, fontSize: 15.0)),
Text("Ini adalah contoh artikel pada listview dengan versi custom", style: TextStyle(color: Colors.white),)
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: new Icon(Icons.home, color: Colors.white, size: 50.0,),
),
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 100.0,
color: Colors.blue[200],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Artikel 3", style: TextStyle(color: Colors.white, fontSize: 15.0)),
Text("Ini adalah contoh artikel pada listview dengan versi custom", style: TextStyle(color: Colors.white),)
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: new Icon(Icons.home, color: Colors.white, size: 50.0,),
),
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 100.0,
color: Colors.blue[200],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Artikel 4", style: TextStyle(color: Colors.white, fontSize: 15.0)),
Text("Ini adalah contoh artikel pada listview dengan versi custom", style: TextStyle(color: Colors.white),)
],
),
),
)
],
),
),
],
),
),
);
}
}

Pada contoh ini saya pakai Container pada tiap-tiap list item. Lalu di dalamnya saya gunakan Row untuk membagi setiap list menjadi 2 kotak yang nantinya akan saya Icon dan Text. Hasilnya akan seperti di bawah ini.


Kalian bisa mencoba membuat desain custom versi kalian sendiri dengan widget-widget yang ada.

Selamat mencoba :)






Card image cap
[Flutter][11] Membuat Listview (Basic)
25 Feb 2019 Learn


Card image cap
[Flutter][13] Membuat Horizontal List
26 Feb 2019 Learn