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

Hello world,

Melanjutkan pembahasan sebelumnya kali ini saya membuat pembahasan simpel mengenai bagaimana cara membuat list secara hosrizontal yang biasa kita lihat di aplikasi-aplikasi kekinian. Oke langsung saja di sini saya pakai kode list sederhana di bawah ini untuk contoh awal. Dari contoh di bawah ini akan menghasilkan list sederhana dengan tiap-tiap item berwarna berbeda.

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: [
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
],
),
),
);
}
}

Selanjutnya kita coba buat versi horizontalnya dengan menambahkan kode berikut di dalam listview (baris warna biru).

body: new Container(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),

Sangat mudah bukan? kita bisa menambahkan height pada container agar ketinggian listnya bisa disesuaikan menjadi sebagai begikut.

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(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
],
),
),
);
}
}

Selebihnya bisa dikreasikan sendiri bentuk dari list itemnya.

Selamat Mencoba :)