Unable to Sort List in Flutter

Question

I am an absolute novice in Flutter. I am trying to display a list of girls based on their distance from me. For this purpose, I created a class called Girls with properties of name and distance.

Code:

class Girls {
  String name;
  int distance;

  Girls(this.name, this.distance);
}

In a stateful widget: GirlsScreen, I am trying to display the list of girls in a ListTile.

Code:

import 'package:flutter/material.dart';
import 'package:switch_circle_color/model/girls.dart';

class GirlsScreen extends StatefulWidget {
  GirlsScreen({Key? key}) : super(key: key);

  @override
  State<GirlsScreen> createState() => _GirlsScreenState();
}

class _GirlsScreenState extends State<GirlsScreen> {
  int distance = 15;

List<Girls> allGirls = [
    Girls("Reshmita", 25),
    Girls("Ankita", 17),
    Girls("Rupali", 42),
    Girls("Monica", 50),
    Girls("Sakshi", 9)
  ];

allGirls.sort((a, b) => a.distance.compareTo(b.distance));

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          Padding(padding: EdgeInsets.all(20)),
          Slider(
            min: 1.0,
            max: 100.0,
            divisions: 100,
            activeColor: Colors.green,
            inactiveColor: Colors.orange,
            label: 'Set distance value',
            value: distance.toDouble(),
            onChanged: (value) {
              changeDistance(value);
            },
          ),
          Padding(padding: EdgeInsets.all(10)),
          Text("Current distance is $distance kms"),
          Padding(padding: EdgeInsets.all(10)),
          Expanded(
            child: ListView.builder(
              itemCount: allGirls.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  leading: const Icon(Icons.girl_outlined),
                  trailing: Text("${allGirls[index].distance} km away"),
                  title: Text("${allGirls[index].name}"),
                );
              },
            ),
          ),
        ],
      ),
    ));
  }
}

The following line is giving an error:

allGirls.sort((a, b) => a.distance.compareTo(b.distance));

Error message shown in the image below:

How do I sort my list so as to display the girls from nearest to farthest. This is how my app looks:

I think you have a typo, try this allGirls.sort((a, b) => a.distance.compareTo(b.distance))); — esentis
allGirls.sort((a, b) => a.distance.compareTo(b.distance)); this line must be inside initState method — Nagual
@Nagual Thanks a lot, code works perfectly after including the line inside the initState(). — Ayan Dasgupta

Indra Wow Indra Wow · Accepted Answer · 2022-07-28T14:58:35

First, you forget the setState()
Second, you forget to create void changeDistance()

Heres my code

import 'package:flutter/material.dart';

class Girls {
  String name;
  int distance;
  Girls(this.name, this.distance);
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int distance = 15;

  List<Girls> nearByGirls = [];

  List<Girls> allGirls = [
    Girls("Reshmita", 25),
    Girls("Ankita", 17),
    Girls("Rupali", 42),
    Girls("Monica", 50),
    Girls("Sakshi", 9)
  ];

  void changeDistance(int value) {
    distance = value;
    debugPrint('distance: $distance');

    nearByGirls.clear(); // Clear list

    for (var girl in allGirls) {
      if (girl.distance <= distance) {
        nearByGirls.add(girl);
      }
    }
    nearByGirls.sort((a, b) => a.distance.compareTo(b.distance)); // Sort

    setState(() {}); // Refresh UI
  }

  @override
  void initState() {
    super.initState();
    changeDistance(distance);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          const Padding(padding: EdgeInsets.all(20)),
          Slider(
            min: 1.0,
            max: 100.0,
            divisions: 100,
            activeColor: Colors.green,
            inactiveColor: Colors.orange,
            label: 'Set distance value',
            value: distance.toDouble(),
            onChanged: (value) {
              changeDistance(value.toInt());
            },
          ),
          const Padding(padding: EdgeInsets.all(10)),
          Text("Current distance is $distance kms"),
          const Padding(padding: EdgeInsets.all(10)),
          Expanded(
            child: ListView.builder(
              itemCount: nearByGirls.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  leading: const Icon(Icons.girl_outlined),
                  trailing: Text("${nearByGirls[index].distance} km away"),
                  title: Text(nearByGirls[index].name),
                );
              },
            ),
          ),
        ],
      ),
    ));
  }
}

Unable to Sort List in Flutter

1 Answers