UDACODING

Posts

Cara membuat ListView di dalam ListView pada Flutter atau Nested ListView

Bismillah,

Membuat ListView itu mudah, namun ketika kita ingin menambahkan ListView lagi di dalamnya, maka ListView tersebut tidak bisa tampil dengan baik, untuk itu ada solusi sederhana mengatasi hal semacam ini.

Caranya sangat simple dan mudah sekali, cukup tambahkan parameter berikut pada ListView yang berada di dalamnya.

shrinkWrap: true,
physics: ClampingScrollPhysics(),

Sekarang kita coba buat contohnya:

Pada class utama, kita buat seperti berikut :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

lalu pada MyHomePage, kita coba isikan seperti berikut:

import 'dart:math';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Nested ListView"),
      ),
      body: ListView(
        children: <Widget>[
          buildItem(1),
          buildItem(2),
          buildItem(3),
          buildItem(4),
          buildItem(5),
          ListView(
            children: <Widget>[
              buildItem(10),
              buildItem(20),
              buildItem(30),
              buildItem(40),
              buildItem(50),
            ],
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
          ),
          buildItem(6),
          buildItem(7),
          buildItem(8),
          buildItem(9),
          buildItem(10),
        ],
      ),
    );
  }

  Container buildItem(int number) {
    return Container(
          padding: EdgeInsets.all(16),
          color: randomColor,
          child: Text("List $number"),
        );
  }

  Color get randomColor {
    List<Color> colors = [Colors.lime, Colors.redAccent, Colors.lightBlue, Colors.greenAccent, Colors.pink, Colors.green, Colors.lime, Colors.purple, Colors.yellow];
    return colors[Random().nextInt(colors.length)];
  }
}

sekarang kita coba running, dan hasilnya seperti berikut :

Kita berhasil membuat Nested ListView

Sekian…

Leave a Reply :

* Your email address will not be published.