Posts

Bismillah, pada tips kali ini kita akan membahas tentang cara mengurutkan sebuah data json berdasarkan value tertentu yang berada didalamnya

Anggap kita punya sebuah data json dan kita menampilkannya seperti berikut :

import 'package:flutter/material.dart';
import 'package:passing_navigator_pop/pilih_warna.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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var siswa = [
    {
      "id": 2,
      "nama": "Rizal",
      "sudah_lulus": true
    },
    {
      "id": 4,
      "nama": "Endi",
      "sudah_lulus": false
    },
    {
      "id": 1,
      "nama": "Tika",
      "sudah_lulus": true
    },
    {
      "id": 3,
      "nama": "Fairuz",
      "sudah_lulus": false
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Daftar Siswa"),
      ),
      body: ListView.builder(
        itemCount: siswa.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              leading: Text(siswa[index]['id'].toString()),
              title: Text(siswa[index]['nama']),
              trailing: siswa[index]['sudah_lulus']
                  ? Icon(Icons.check_circle, color: Colors.green,)
                  : Icon(Icons.school, color: Colors.blue),
            ),
          );
        }
      )
    );
  }
}

Lalu bagaimana mengurutkannya? baik berdasarkan nama, id, atau lulusnya?

Caranya sangat mudah, kita bisa gunakan method sort seperti berikut :

untuk nama kita sort seperti berikut :

@override
  Widget build(BuildContext context) {
    // urutkan berdasarkan nama
    siswa.sort((siswa1, siswa2) {
      return siswa2['nama'].toString().compareTo(siswa1['nama'].toString());
    });

    return Scaffold(
      appBar: AppBar(
        title: Text("Daftar Siswa"),
      ),
      body: ListView.builder(
        itemCount: siswa.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              leading: Text(siswa[index]['id'].toString()),
              title: Text(siswa[index]['nama']),
              trailing: siswa[index]['sudah_lulus']
                  ? Icon(Icons.check_circle, color: Colors.green,)
                  : Icon(Icons.school, color: Colors.blue),
            ),
          );
        }
      )
    );
  }

Untuk yang lainnya seperti id, atau sudah luluspun sama, kita tinggal mengganti valuenya

// urutkan berdasarkan id
siswa.sort((siswa1, siswa2) {
 return siswa1['id'].toString().compareTo(siswa2['id'].toString());
});
    

// urutkan berdasarkan sudah lulus
    siswa.sort((siswa1, siswa2) {
      return siswa1['sudah_lulus'].toString().compareTo(siswa2['sudah_lulus'].toString());
    });

Apabila kita ingin menyesuaikan mau pakai ascending atau descending, kita tinggal menyesuaikan saja penempatan comparenya sebagai contoh untuk descending nama yaitu seperti berikut :

siswa.sort((siswa1, siswa2) {
return siswa2['nama'].toString().compareTo(siswa1['nama'].toString());
});