forked from eatvio/eatvio_app
390 lines
16 KiB
Dart
390 lines
16 KiB
Dart
import 'package:eatvio_app/features/profile/models/circumference_model.dart';
|
|
import 'package:eatvio_app/features/profile/presentation/bloc/profile_cubit/profile_cubit.dart';
|
|
import 'package:eatvio_app/core/theme/theme_helper.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:syncfusion_flutter_charts/charts.dart';
|
|
|
|
class CircumferenceChartWidget extends StatefulWidget {
|
|
final List<CircumferenceModel> circumferencePoints;
|
|
final ProfileCubit? profileCubit;
|
|
|
|
const CircumferenceChartWidget({
|
|
super.key,
|
|
required this.circumferencePoints,
|
|
this.profileCubit,
|
|
});
|
|
|
|
@override
|
|
State<CircumferenceChartWidget> createState() => _CircumferenceChartWidgetState();
|
|
}
|
|
|
|
class _CircumferenceChartWidgetState extends State<CircumferenceChartWidget> {
|
|
late FixedExtentScrollController chestController;
|
|
late FixedExtentScrollController waistController;
|
|
late FixedExtentScrollController hipController;
|
|
late int chest;
|
|
late int waist;
|
|
late int hip;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
if (widget.circumferencePoints.isNotEmpty)
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'${widget.circumferencePoints.last.chestCircumference}',
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 40,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length == 1)
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 12),
|
|
width: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.black12,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length > 1)
|
|
widget.circumferencePoints.last.chestCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].chestCircumference
|
|
? const Icon(
|
|
Icons.arrow_drop_up,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
)
|
|
: const Icon(
|
|
Icons.arrow_drop_down,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
),
|
|
Text(
|
|
'${widget.circumferencePoints.last.waistCircumference}',
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 40,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length == 1)
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 12),
|
|
width: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.black12,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length > 1)
|
|
widget.circumferencePoints.last.waistCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].waistCircumference
|
|
? const Icon(
|
|
Icons.arrow_drop_up,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
)
|
|
: const Icon(
|
|
Icons.arrow_drop_down,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
),
|
|
Text(
|
|
'${widget.circumferencePoints.last.hipCircumference}',
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 40,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length == 1)
|
|
Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 12),
|
|
width: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.black12,
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.length > 1)
|
|
widget.circumferencePoints.last.hipCircumference > widget.circumferencePoints[widget.circumferencePoints.length - 2].hipCircumference
|
|
? const Icon(
|
|
Icons.arrow_drop_up,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
)
|
|
: const Icon(
|
|
Icons.arrow_drop_down,
|
|
size: 40,
|
|
color: Colors.grey,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
SfCartesianChart(
|
|
margin: const EdgeInsets.symmetric(horizontal: 8),
|
|
enableAxisAnimation: true,
|
|
plotAreaBorderWidth: 0,
|
|
trackballBehavior: TrackballBehavior(
|
|
enable: true,
|
|
activationMode: ActivationMode.singleTap,
|
|
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
|
|
tooltipSettings: const InteractiveTooltip(),
|
|
lineType: TrackballLineType.vertical,
|
|
),
|
|
primaryXAxis: DateTimeCategoryAxis(
|
|
tickPosition: TickPosition.inside,
|
|
majorTickLines: const MajorTickLines(
|
|
size: 0,
|
|
),
|
|
edgeLabelPlacement: EdgeLabelPlacement.shift,
|
|
dateFormat: DateFormat.MMMd('ru'),
|
|
labelStyle: const TextStyle(
|
|
color: Colors.grey,
|
|
),
|
|
majorGridLines: MajorGridLines(dashArray: const [1], color: Colors.grey.withValues(alpha: 0.3)),
|
|
axisLine: AxisLine(
|
|
color: Colors.grey.withValues(alpha: 0.3),
|
|
width: 0.4,
|
|
),
|
|
),
|
|
primaryYAxis: const NumericAxis(
|
|
isVisible: false,
|
|
labelFormat: '{value} см',
|
|
axisLine: AxisLine(
|
|
width: 1,
|
|
),
|
|
majorTickLines: MajorTickLines(size: 0),
|
|
),
|
|
series: _getSplineSeries(),
|
|
tooltipBehavior: TooltipBehavior(enable: true),
|
|
),
|
|
if (widget.profileCubit != null)
|
|
Positioned(
|
|
right: 16,
|
|
bottom: 16,
|
|
child: FloatingActionButton.small(
|
|
heroTag: 'addCircumference',
|
|
onPressed: () {
|
|
if (widget.circumferencePoints.isNotEmpty) {
|
|
chest = widget.circumferencePoints.last.chestCircumference;
|
|
waist = widget.circumferencePoints.last.waistCircumference;
|
|
hip = widget.circumferencePoints.last.hipCircumference;
|
|
chestController = FixedExtentScrollController(initialItem: chest - 20);
|
|
waistController = FixedExtentScrollController(initialItem: waist - 20);
|
|
hipController = FixedExtentScrollController(initialItem: hip - 20);
|
|
} else {
|
|
chestController = FixedExtentScrollController();
|
|
waistController = FixedExtentScrollController();
|
|
hipController = FixedExtentScrollController();
|
|
}
|
|
showModalBottomSheet(
|
|
useRootNavigator: true,
|
|
context: context,
|
|
builder: (context) {
|
|
return SafeArea(
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: CupertinoPicker(
|
|
magnification: 1.22,
|
|
squeeze: 1.2,
|
|
useMagnifier: true,
|
|
scrollController: chestController,
|
|
itemExtent: 24,
|
|
onSelectedItemChanged: (int value) {
|
|
chest = value;
|
|
},
|
|
children: [
|
|
for (int i = 20; i < 200; i++) Text('$i'),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: CupertinoPicker(
|
|
magnification: 1.22,
|
|
squeeze: 1.2,
|
|
useMagnifier: true,
|
|
scrollController: waistController,
|
|
itemExtent: 24,
|
|
onSelectedItemChanged: (int value) {
|
|
waist = value;
|
|
},
|
|
children: [
|
|
for (int i = 20; i < 200; i++) Text('$i'),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: CupertinoPicker(
|
|
magnification: 1.22,
|
|
squeeze: 1.2,
|
|
useMagnifier: true,
|
|
scrollController: hipController,
|
|
itemExtent: 24,
|
|
onSelectedItemChanged: (int value) {
|
|
hip = value;
|
|
},
|
|
children: [
|
|
for (int i = 20; i < 200; i++) Text('$i'),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
InkWell(
|
|
onTap: () {
|
|
widget.profileCubit?.addCircumference(
|
|
chestCircumference: chest + 20,
|
|
waistCircumference: waist + 20,
|
|
hipCircumference: hip + 20,
|
|
);
|
|
Navigator.of(context).pop();
|
|
},
|
|
borderRadius: BorderRadius.circular(16),
|
|
child: Ink(
|
|
width: MediaQuery.of(context).size.width - 32,
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: appTheme.blueA400,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: const Center(
|
|
child: Text(
|
|
'Сохранить',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
backgroundColor: appTheme.blueA400,
|
|
shape: const CircleBorder(),
|
|
child: const Icon(
|
|
Icons.add,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
if (widget.circumferencePoints.isEmpty)
|
|
const Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 48),
|
|
child: Text(
|
|
'Добавьте Ваши замеры',
|
|
textAlign: TextAlign.center,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
List<CartesianSeries<CircumferenceModel, DateTime>> _getSplineSeries() {
|
|
const Color seriesColor1 = Colors.red;
|
|
final Color seriesColor2 = appTheme.blueA400;
|
|
const Color seriesColor3 = Colors.green;
|
|
|
|
return <CartesianSeries<CircumferenceModel, DateTime>>[
|
|
SplineAreaSeries<CircumferenceModel, DateTime>(
|
|
markerSettings: const MarkerSettings(
|
|
isVisible: true,
|
|
color: seriesColor1,
|
|
height: 8,
|
|
width: 8,
|
|
),
|
|
dataLabelSettings: const DataLabelSettings(
|
|
labelAlignment: ChartDataLabelAlignment.top,
|
|
isVisible: true,
|
|
),
|
|
dataSource: widget.circumferencePoints,
|
|
borderColor: seriesColor1,
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
seriesColor1.withValues(alpha: 0.14),
|
|
Colors.transparent,
|
|
],
|
|
begin: Alignment.topCenter,
|
|
end: const Alignment(0, 0.6),
|
|
),
|
|
name: 'Грудь',
|
|
xValueMapper: (CircumferenceModel value, int index) => value.createdAt,
|
|
yValueMapper: (CircumferenceModel value, int index) => value.chestCircumference,
|
|
),
|
|
SplineAreaSeries<CircumferenceModel, DateTime>(
|
|
markerSettings: MarkerSettings(
|
|
isVisible: true,
|
|
color: seriesColor2,
|
|
height: 8,
|
|
width: 8,
|
|
),
|
|
dataLabelSettings: const DataLabelSettings(
|
|
labelAlignment: ChartDataLabelAlignment.top,
|
|
isVisible: true,
|
|
),
|
|
dataSource: widget.circumferencePoints,
|
|
borderColor: seriesColor2,
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
seriesColor2.withValues(alpha: 0.14),
|
|
Colors.transparent,
|
|
],
|
|
begin: Alignment.topCenter,
|
|
end: const Alignment(0, 0.6),
|
|
),
|
|
name: 'Талия',
|
|
xValueMapper: (CircumferenceModel value, int index) => value.createdAt,
|
|
yValueMapper: (CircumferenceModel value, int index) => value.waistCircumference,
|
|
),
|
|
SplineAreaSeries<CircumferenceModel, DateTime>(
|
|
markerSettings: const MarkerSettings(
|
|
isVisible: true,
|
|
color: seriesColor3,
|
|
height: 8,
|
|
width: 8,
|
|
),
|
|
dataLabelSettings: const DataLabelSettings(
|
|
labelAlignment: ChartDataLabelAlignment.top,
|
|
isVisible: true,
|
|
),
|
|
dataSource: widget.circumferencePoints,
|
|
borderColor: seriesColor3,
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
seriesColor3.withValues(alpha: 0.14),
|
|
Colors.transparent,
|
|
],
|
|
begin: Alignment.topCenter,
|
|
end: const Alignment(0, 0.6),
|
|
),
|
|
name: 'Бёдра',
|
|
xValueMapper: (CircumferenceModel value, int index) => value.createdAt,
|
|
yValueMapper: (CircumferenceModel value, int index) => value.hipCircumference,
|
|
),
|
|
];
|
|
}
|
|
}
|