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);
}
>Solution :
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'),
),
);
}
}