Image Load

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 :)