|
|
|
|
@ -154,7 +154,6 @@ import 'package:flutter/material.dart';
|
|
|
|
|
import 'package:pie_chart/pie_chart.dart';
|
|
|
|
|
import 'package:provider/provider.dart';
|
|
|
|
|
import 'package:test_sa/dashboard_latest/dashboard_provider.dart';
|
|
|
|
|
import 'package:test_sa/extensions/context_extension.dart';
|
|
|
|
|
import 'package:test_sa/extensions/int_extensions.dart';
|
|
|
|
|
import 'package:test_sa/extensions/string_extensions.dart';
|
|
|
|
|
import 'package:test_sa/extensions/text_extensions.dart';
|
|
|
|
|
@ -164,11 +163,53 @@ import 'package:test_sa/new_views/app_style/app_color.dart';
|
|
|
|
|
import '../../controllers/providers/api/user_provider.dart';
|
|
|
|
|
import '../../models/enums/user_types.dart';
|
|
|
|
|
|
|
|
|
|
class ProgressFragment extends StatelessWidget {
|
|
|
|
|
ProgressFragment({Key? key}) : super(key: key);
|
|
|
|
|
class ProgressFragment extends StatefulWidget {
|
|
|
|
|
const ProgressFragment({Key? key}) : super(key: key);
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
State<ProgressFragment> createState() => _ProgressFragmentState();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class _ProgressFragmentState extends State<ProgressFragment> with SingleTickerProviderStateMixin {
|
|
|
|
|
late AnimationController _controller;
|
|
|
|
|
late Animation<double> _fadeAnimation;
|
|
|
|
|
late Animation<double> _scaleAnimation;
|
|
|
|
|
late UserProvider _userProvider;
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
void initState() {
|
|
|
|
|
super.initState();
|
|
|
|
|
|
|
|
|
|
_controller = AnimationController(
|
|
|
|
|
duration: const Duration(milliseconds: 800),
|
|
|
|
|
vsync: this,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
_fadeAnimation = Tween<double>(
|
|
|
|
|
begin: 0.0,
|
|
|
|
|
end: 1.0,
|
|
|
|
|
).animate(CurvedAnimation(
|
|
|
|
|
parent: _controller,
|
|
|
|
|
curve: const Interval(0.0, 0.6, curve: Curves.easeIn),
|
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
_scaleAnimation = Tween<double>(
|
|
|
|
|
begin: 0.92,
|
|
|
|
|
end: 1.0,
|
|
|
|
|
).animate(CurvedAnimation(
|
|
|
|
|
parent: _controller,
|
|
|
|
|
curve: const Interval(0.0, 0.8, curve: Curves.easeOutCubic),
|
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
_controller.forward();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
void dispose() {
|
|
|
|
|
_controller.dispose();
|
|
|
|
|
super.dispose();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
_userProvider = Provider.of<UserProvider>(context);
|
|
|
|
|
@ -200,107 +241,113 @@ class ProgressFragment extends StatelessWidget {
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return Column(
|
|
|
|
|
children: [
|
|
|
|
|
AspectRatio(
|
|
|
|
|
aspectRatio: (359.toScreenWidth / 214.toScreenWidth),
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Text(
|
|
|
|
|
"Work Order Status".addTranslation,
|
|
|
|
|
style: AppTextStyles.heading4.copyWith(color: AppColor.headingTextColor(context)),
|
|
|
|
|
),
|
|
|
|
|
Wrap(
|
|
|
|
|
spacing: 8,
|
|
|
|
|
runSpacing: 8,
|
|
|
|
|
children: [
|
|
|
|
|
for (int i = 0; i < chartData.length; i++)
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
children: [
|
|
|
|
|
Container(
|
|
|
|
|
height: 6,
|
|
|
|
|
width: 6,
|
|
|
|
|
decoration: BoxDecoration(color: chartData[i].color, borderRadius: BorderRadius.circular(1)),
|
|
|
|
|
),
|
|
|
|
|
4.width,
|
|
|
|
|
Text(chartData[i].x, style: AppTextStyles.textStyle9.copyWith(color: AppColor.text9Color(context))),
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
8.height,
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
|
|
|
spacing: 60.toScreenWidth,
|
|
|
|
|
return FadeTransition(
|
|
|
|
|
opacity: _fadeAnimation,
|
|
|
|
|
child: ScaleTransition(
|
|
|
|
|
scale: _scaleAnimation,
|
|
|
|
|
child: Column(
|
|
|
|
|
children: [
|
|
|
|
|
AspectRatio(
|
|
|
|
|
aspectRatio: (359.toScreenWidth / 214.toScreenWidth),
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Expanded(
|
|
|
|
|
flex: 3,
|
|
|
|
|
child: SizedBox(
|
|
|
|
|
height: 124.toScreenWidth,
|
|
|
|
|
width: 124.toScreenWidth,
|
|
|
|
|
child: PieChart(
|
|
|
|
|
dataMap: {for (var v in chartData) v.x: v.y},
|
|
|
|
|
animationDuration: const Duration(milliseconds: 750),
|
|
|
|
|
chartLegendSpacing: 0,
|
|
|
|
|
chartRadius: 124,
|
|
|
|
|
colorList: chartData.map((element) => element.color).toList(),
|
|
|
|
|
initialAngleInDegree: 270,
|
|
|
|
|
chartType: ChartType.ring,
|
|
|
|
|
ringStrokeWidth: 32,
|
|
|
|
|
legendOptions: LegendOptions(
|
|
|
|
|
showLegendsInRow: true,
|
|
|
|
|
legendPosition: LegendPosition.top,
|
|
|
|
|
showLegends: false,
|
|
|
|
|
legendTextStyle: AppTextStyles.textStyle9,
|
|
|
|
|
),
|
|
|
|
|
chartValuesOptions: ChartValuesOptions(
|
|
|
|
|
showChartValueBackground: true,
|
|
|
|
|
chartValueBackgroundColor: const Color(0xff226187).withValues(alpha: .75),
|
|
|
|
|
chartValueStyle: AppTextStyles.tinyFont2.copyWith(height: 1.5, color: Colors.white),
|
|
|
|
|
showChartValues: true,
|
|
|
|
|
showChartValuesInPercentage: true,
|
|
|
|
|
showChartValuesOutside: true,
|
|
|
|
|
decimalPlaces: 0,
|
|
|
|
|
),
|
|
|
|
|
).toShimmer(isShow: snapshot.isAllCountLoading, radius: 250, context: context).paddingAll(0),
|
|
|
|
|
),
|
|
|
|
|
Text(
|
|
|
|
|
"Work Order Status".addTranslation,
|
|
|
|
|
style: AppTextStyles.heading4.copyWith(color: AppColor.headingTextColor(context)),
|
|
|
|
|
),
|
|
|
|
|
Wrap(
|
|
|
|
|
spacing: 8,
|
|
|
|
|
runSpacing: 8,
|
|
|
|
|
children: [
|
|
|
|
|
for (int i = 0; i < chartData.length; i++)
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
children: [
|
|
|
|
|
Container(
|
|
|
|
|
height: 6,
|
|
|
|
|
width: 6,
|
|
|
|
|
decoration: BoxDecoration(color: chartData[i].color, borderRadius: BorderRadius.circular(1)),
|
|
|
|
|
),
|
|
|
|
|
4.width,
|
|
|
|
|
Text(chartData[i].x, style: AppTextStyles.textStyle9.copyWith(color: AppColor.text9Color(context))),
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
Expanded(
|
|
|
|
|
flex: 2,
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
spacing: 8,
|
|
|
|
|
children: [
|
|
|
|
|
for (int i = 0; i < chartData.length; i++)
|
|
|
|
|
Row(
|
|
|
|
|
spacing: 16,
|
|
|
|
|
children: [
|
|
|
|
|
chartData[i].icon.toSvgAsset(height: 26, width: 26, color: chartData[i].color).toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
Column(
|
|
|
|
|
spacing: 4,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
8.height,
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
|
|
|
spacing: 60.toScreenWidth,
|
|
|
|
|
children: [
|
|
|
|
|
Expanded(
|
|
|
|
|
flex: 3,
|
|
|
|
|
child: SizedBox(
|
|
|
|
|
height: 124.toScreenWidth,
|
|
|
|
|
width: 124.toScreenWidth,
|
|
|
|
|
child: PieChart(
|
|
|
|
|
dataMap: {for (var v in chartData) v.x: v.y},
|
|
|
|
|
animationDuration: const Duration(milliseconds: 750),
|
|
|
|
|
chartLegendSpacing: 0,
|
|
|
|
|
chartRadius: 124,
|
|
|
|
|
colorList: chartData.map((element) => element.color).toList(),
|
|
|
|
|
initialAngleInDegree: 270,
|
|
|
|
|
chartType: ChartType.ring,
|
|
|
|
|
ringStrokeWidth: 32,
|
|
|
|
|
legendOptions: LegendOptions(
|
|
|
|
|
showLegendsInRow: true,
|
|
|
|
|
legendPosition: LegendPosition.top,
|
|
|
|
|
showLegends: false,
|
|
|
|
|
legendTextStyle: AppTextStyles.textStyle9,
|
|
|
|
|
),
|
|
|
|
|
chartValuesOptions: ChartValuesOptions(
|
|
|
|
|
showChartValueBackground: true,
|
|
|
|
|
chartValueBackgroundColor: const Color(0xff226187).withValues(alpha: .75),
|
|
|
|
|
chartValueStyle: AppTextStyles.tinyFont2.copyWith(height: 1.5, color: Colors.white),
|
|
|
|
|
showChartValues: true,
|
|
|
|
|
showChartValuesInPercentage: true,
|
|
|
|
|
showChartValuesOutside: true,
|
|
|
|
|
decimalPlaces: 0,
|
|
|
|
|
),
|
|
|
|
|
).toShimmer(isShow: snapshot.isAllCountLoading, radius: 250, context: context).paddingAll(0),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Expanded(
|
|
|
|
|
flex: 2,
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
spacing: 8,
|
|
|
|
|
children: [
|
|
|
|
|
for (int i = 0; i < chartData.length; i++)
|
|
|
|
|
Row(
|
|
|
|
|
spacing: 16,
|
|
|
|
|
children: [
|
|
|
|
|
Text(chartData[i].x, style: AppTextStyles.textStyle9.copyWith(color: AppColor.text9Color(context)))
|
|
|
|
|
.toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
Text("${chartData[i].y.toInt()}", style: AppTextStyles.bodyText.copyWith(color: AppColor.headingTextColor(context)))
|
|
|
|
|
.toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
chartData[i].icon.toSvgAsset(height: 26, width: 26, color: chartData[i].color).toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
Column(
|
|
|
|
|
spacing: 4,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Text(chartData[i].x, style: AppTextStyles.textStyle9.copyWith(color: AppColor.text9Color(context)))
|
|
|
|
|
.toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
Text("${chartData[i].y.toInt()}", style: AppTextStyles.bodyText.copyWith(color: AppColor.headingTextColor(context)))
|
|
|
|
|
.toShimmer(isShow: snapshot.isAllCountLoading, context: context),
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
).expanded,
|
|
|
|
|
],
|
|
|
|
|
).expanded,
|
|
|
|
|
],
|
|
|
|
|
).toShadowContainer(context, borderRadius: 20, paddingObject: const EdgeInsets.symmetric(horizontal: 24, vertical: 16)),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
).paddingOnly(start: 16, end: 16);
|
|
|
|
|
).toShadowContainer(context, borderRadius: 20, paddingObject: const EdgeInsets.symmetric(horizontal: 24, vertical: 16)),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
).paddingOnly(start: 16, end: 16),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|