如何在 flutter 的一行中获取选定的索引

Question

Date selector

I want to build a date selector for user to select the date they want to book a class. So far I have coded the logic to generate next 8days and display it in a row, but I have trouble getting the selected index when user tap a date. How do I achieve that?

Thank you very much.

class TimeSlot extends StatelessWidget {
  List<Map<String, String>> get upComingDay {
    return List.generate(8, (index) {
      final weekDay = DateTime.now().add(
        Duration(days: index),
      );
      return {
        'day': DateFormat.E().format(weekDay).substring(0, 2),
        'date': DateFormat.d().format(weekDay),
      };
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: upComingDay.map((data) {
        return Column(
          children: <Widget>[
            Text(
              data['day'],
              style: TextStyle(
                color: Color.fromRGBO(30, 41, 51, 0.5),
              ),
            ),
            SizedBox(
              height: 7,
            ),
            GestureDetector(
              onTap: () {},
              child: CircleAvatar(
                backgroundColor: Color.fromRGBO(240, 242, 245, 1),
                radius: 14,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text(
                    data['date'],
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  radius: 13,
                ),
              ),
            ),
          ],
        );
      }).toList(),
    );
  }
}

Answer 1

Try using this trick:

Replace

.map()

with

.asMap().entries.map()

For example:

children: upComingDay.asMap().entries.map((dataEntry) {
        return Column(
          children: <Widget>[
            Text(
              dataEntry.value['day'],
              style: TextStyle(
                color: Color.fromRGBO(30, 41, 51, 0.5),
              ),
            ),
            SizedBox(
              height: 7,
            ),
            GestureDetector(
              onTap: () {
                // Whatever you wanna use the index for, refer as dataEntry.key for index
              },
              child: CircleAvatar(
                backgroundColor: Color.fromRGBO(240, 242, 245, 1),
                radius: 14,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text(
                    dataEntry.value['date'],
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  radius: 13,
                ),
              ),
            ),
          ],
        );
      }).toList(),

Does that accomplish what you're looking for?