I'm creating an expense tracker app. I did my best but couldn't figure out how to group expenses for each day so that I can count total expense and total income for that day and also display them separated by empty space.
CodePudding user response：
use GROUP BY in your sql statement
CodePudding user response：
You can try this code.
import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';
class MyMissionList extends StatefulWidget {
@override
State<MyMissionList> createState() => _MyMissionListState();
}
class _MyMissionListState extends State<MyMissionList> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Column(
children: [
AppBar(
backgroundColor: AppColors.baseLightBlueColor,
elevation: 0.0,
actions: [
Container(
padding: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/Vector-2.png",
height: 5,
width: 22,
color: Colors.white,
)),
],
),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 20),
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello User123,",
style:
TextStyle(color: AppColors.white, fontSize: 15),
),
SizedBox(height: 10),
Text(
AppStrings.totalAmount,
// "Montant total :",
style:
TextStyle(color: AppColors.white, fontSize: 11),
),
Text(
"592,30 €",
style:
TextStyle(color: AppColors.white, fontSize: 25),
),
],
),
)
],
),
),
)),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(left:15.0,right: 15,top: 15),
child: Text("My Mission",style: TextStyle(
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
),
Expanded(
child: 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: false,
groupSeparatorBuilder: (Element element) => Container(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 220,
padding: EdgeInsets.only(left: 20,top: 20,bottom: 10),
child: Text(
'${element.heading}',
textAlign: TextAlign.start,
style: TextStyle(color: Color(0xff919AAA)),
),
),
],
),
),
itemBuilder: (_, Element element) {
return element.type
? GestureDetector(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> WaitingForValidation()));
},
child: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
elevation: 15.0,
shadowColor: Colors.blue[100],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0))),
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
// boxShadow: [BoxShadow(color: AppColors.grey, blurRadius: 20.0)],
borderRadius:
BorderRadius.circular(20.0),
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blue.shade900,
],
)),
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
),
),
],
),
),
),
)
: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top:5.0,bottom: 5),
child: Container(
height: 30,
width: 95,
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: AppColors.green,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
);
},
),
),
],
),
);
}
}
class Element {
bool type;
DateTime date;
String hotelName;
String subTitle;
String heading;
String buttonText;
Element(this.date, this.type, this.hotelName, this.subTitle, this.heading,
this.buttonText);
}
List<Element> elements = <Element>[
Element(
DateTime(2020, 7, 22),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
/**/
"Terminate",
),
Element(
DateTime(2021, 12, 12),
true,
"Visite entrepot Villabe ",
"Mercredi",
"To Plan",
"To Plan",
),
];