如何在 flutter 的可扩展列表视图中显示数据

Question

I want to display the data in an expandable list view in flutter... for instance, I need the below List as the header of the listView... days = ['Monday','Tuesday', 'Wednesday'] ..... and on expanding based on the day in the days list....the below data gets populated of the same day.

List<Cars> dummyData = [
Cars(
model: 'Fiat',
speed: '100',
day: 'Monday',
),
Cars(
model: 'Maruti',
speed: '120',
day: 'Monday',
),
Cars(
model: 'Hyundai',
speed: '130',
day: 'Tuesday',
),
Cars(
model: 'Toyota',
speed: '140',
day: 'Wednesday',
),
]

Please let me know if you require any additional information from my end.

Answer 1

You can achieve using expantionTile widget.

Following code may help you.

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

  @override
  _DeleteWidgetState createState() => _DeleteWidgetState();
}

class _DeleteWidgetState extends State<DeleteWidget> {
  List<String> _days = ['sunday', 'Monday', 'Tuesday'];
  List<Cars> dummyData = [
    Cars(
      model: 'Fiat',
      speed: '100',
      day: 'Monday',
    ),
    Cars(
      model: 'Maruti',
      speed: '120',
      day: 'Monday',
    ),
    Cars(
      model: 'Hyundai',
      speed: '130',
      day: 'Tuesday',
    ),
    Cars(
      model: 'Toyota',
      speed: '140',
      day: 'Wednesday',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: _days.length,
          itemBuilder: (_, index) {
            return ExpansionTile(
                title: Text(_days[index].toString()),
                children: [
                  ...dummyData.map((e) {
                    if (e.day == _days[index]) {
                      return Text(e.speed.toString());
                    }
                    return Container();
                  }).toList(),
                ]);
          },
        ),
      ),
    );
  }
}

class Cars {
  String model;
  String speed;
  String day;
  Cars({this.model, this.day, this.speed});
}

Answer 2

First reorganize data like the following:

final organizedData = new HashMap<String, List<Car>>();
for(final car in dummyData){
    if(!organizedData[car.day]){
        organizedData[car.day] = new List<Car>();
        organizedData[car.day].add(car);
    }else{
        organizedData[car.day].add(car);
    }
}

By doing so you will have grouped cars by each day inside a Map, for example, organizedData["Monday"] will contain the list of two cars and so on.

Now put all that in a ListView with an expandable widget perhaps something like this:

  Widget expandableList() {
    return ListView.builder(
      itemCount: organizedData.length,
      itemBuilder: (context, index) {
        String day = organizedData.keys.elementAt(index);
        return Card(
          child: ExpandablePanel(
            header: day,
            collapsed: Text('some text', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
            expanded: Card(
              child: Row(
              children: carsUI(organizedData[day]),
              ),
            tapHeaderToExpand: true,
            hasIcon: true,
          ),
        );
      },
    );
  }

  List<Widget> carsUI(List<Car> cars){
    final ui = cars.map((car){
      return Text(car.speed + ", " + car.model);
    }).toList();
    return ui;
  }

I hope it helps.

Answer 3

You can use ListView.builder() widget for rendering the dynamic list and this method is an efficient method.

ListView.builder(
  itemCount: dummyData.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Column(
        children: <Widget>[
          Text(dummyData[index].model),
          Text(dummyData[index].day),
        ]
      ),
      trailing: Text(dummyData[index].speed)
    )
  }
)