how to select multiple items while using Sticky Grouplist in flutter-CodePudding

here to explain what I want. I have get this code from GitHub..

I want appbar with action button when user starts selecting item

like multiple item selection and appbar shows number of items selected...

I can do it easily with ListViewbuilder but don't know how to deal while using Sticky Group list as it does not providing index number of item....

import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';

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

List<Element> _elements = <Element>[
  Element(DateTime(2020, 6, 24, 18), 'Got to gym', Icons.fitness_center),
  Element(DateTime(2020, 6, 24, 9), 'Work', Icons.work),
  Element(DateTime(2020, 6, 25, 8), 'Buy groceries', Icons.shopping_basket),
  Element(DateTime(2020, 6, 25, 16), 'Cinema', Icons.movie),
  Element(DateTime(2020, 6, 25, 20), 'Eat', Icons.fastfood),
  Element(DateTime(2020, 6, 26, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 13), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 14), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 15), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 28, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 30, 12), 'Car wash', Icons.local_car_wash),
];

class MyApp extends StatelessWidget {
  
 
  
   MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Grouped List View Example'),
          actions: [],
        ),
        body: StickyGroupedListView<Element, DateTime>(
          elements: _elements,
          order: StickyGroupedListOrder.ASC,
          groupBy: (Element element) => DateTime(
            element.date.year,
            element.date.month,
            element.date.day,
          ),
          groupComparator: (DateTime value1, DateTime value2) =>
              value2.compareTo(value1),
          itemComparator: (Element element1, Element element2) =>
              element1.date.compareTo(element2.date),
          //floatingHeader: true,
          groupSeparatorBuilder: _getGroupSeparator,
          itemBuilder: _getItem,
        ),
      ),
    );
  }

  Widget _getGroupSeparator(Element element) {
    return SizedBox(
      height: 40,
      child: Container(
        //width: 120,
        decoration: BoxDecoration(
          color: Colors.grey[300],
          border: Border.all(
            //color: Colors.blue[300]!,
          ),
          //borderRadius: const BorderRadius.all(Radius.circular(20.0)),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '${element.date.day}. ${element.date.month}, ${element.date.year}',
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }

  Widget _getItem(BuildContext ctx, Element element) {
    return Container(
      decoration: BoxDecoration(
        //color: Colors.grey,
        //borderRadius: BorderRadius.circular(20),
      ),
      child: ListTile(
        contentPadding:
        const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: Icon(element.icon),
        title: Text(element.name),
        trailing: Text('${element.date.hour}:00'),
      ),
    );
  }
}

class Element {
  DateTime date;
  String name;
  IconData icon;

  Element(this.date, this.name, this.icon);
}

CodePudding user response：

You need a list to hold to select item.

Run and read this code, you will get it.

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyApp(),
      ),
    );

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Element> _elements = <Element>[
    Element(DateTime(2020, 6, 24, 18), 'Got to gym', Icons.fitness_center),
    Element(DateTime(2020, 6, 24, 9), 'Work', Icons.work),
    Element(DateTime(2020, 6, 25, 8), 'Buy groceries', Icons.shopping_basket),
    Element(DateTime(2020, 6, 25, 16), 'Cinema', Icons.movie),
    Element(DateTime(2020, 6, 25, 20), 'Eat', Icons.fastfood),
    Element(DateTime(2020, 6, 26, 12), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 27, 12), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 27, 13), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 27, 14), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 27, 15), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 28, 12), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
    Element(DateTime(2020, 6, 30, 12), 'Car wash', Icons.local_car_wash),
  ];

  List<Element> selectedItem = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Grouped List View Example'),
        actions: [
          Checkbox(
            value: selectedItem.length == _elements.length,
            onChanged: (value) {
              if (value == false) {
                selectedItem = [];
              } else {
                selectedItem = _elements.toList();
              }
              setState(() {});
            },
          )
        ],
      ),
      body: StickyGroupedListView<Element, DateTime>(
        elements: _elements,
        order: StickyGroupedListOrder.ASC,
        groupBy: (Element element) => DateTime(
          element.date.year,
          element.date.month,
          element.date.day,
        ),
        groupComparator: (DateTime value1, DateTime value2) =>
            value2.compareTo(value1),
        itemComparator: (Element element1, Element element2) =>
            element1.date.compareTo(element2.date),
        //floatingHeader: true,
        groupSeparatorBuilder: _getGroupSeparator,
        itemBuilder: _getItem,
      ),
    );
  }

  Widget _getGroupSeparator(Element element) {
    return SizedBox(
      height: 40,
      child: Container(
        //width: 120,
        decoration: BoxDecoration(
          color: Colors.grey[300],
          border: Border.all(
              //color: Colors.blue[300]!,
              ),
          //borderRadius: const BorderRadius.all(Radius.circular(20.0)),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '${element.date.day}. ${element.date.month}, ${element.date.year}',
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }

  Widget _getItem(BuildContext ctx, Element element) {
    return Container(
      decoration: BoxDecoration(
          //color: Colors.grey,
          //borderRadius: BorderRadius.circular(20),
          ),
      child: ListTile(
        onTap: () {
          if (selectedItem.contains(element)) {
            selectedItem.remove(element);
          } else {
            selectedItem.add(element);
          }
          setState(() {});
        },
        tileColor: selectedItem.contains(element) ? Colors.green : null,
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: Icon(element.icon),
        title: Text(element.name),
        trailing: Text('${element.date.hour}:00'),
      ),
    );
  }
}