forked from eatvio/eatvio_app
feat(diary): chart update
This commit is contained in:
mso7nueh
@@ -2,6 +2,7 @@ import 'dart:io';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:eatvio_app/core/const.dart';
|
||||
import 'package:eatvio_app/features/diary/models/diary_day_model.dart';
|
||||
import 'package:eatvio_app/features/diary/models/nutrition_model.dart';
|
||||
import 'package:eatvio_app/features/diary/presentation/bloc/diary_cubit.dart';
|
||||
import 'package:eatvio_app/features/diary/presentation/bloc/diary_state.dart';
|
||||
import 'package:eatvio_app/features/diary/presentation/widgets/satiety_rating_widget.dart';
|
||||
@@ -16,7 +17,7 @@ import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:flutter_typeahead/flutter_typeahead.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'package:rive/rive.dart';
|
||||
import 'package:syncfusion_flutter_charts/charts.dart';
|
||||
import 'package:syncfusion_flutter_gauges/gauges.dart';
|
||||
import 'package:table_calendar/table_calendar.dart';
|
||||
|
||||
class DiaryScreen extends StatefulWidget {
|
||||
@@ -66,7 +67,7 @@ class _DiaryScreenState extends State<DiaryScreen> {
|
||||
state.diary,
|
||||
state.currentSelectedSatietyRating,
|
||||
),
|
||||
if (state is DiaryStateLoaded) _chart(),
|
||||
if (state is DiaryStateLoaded) _chart(state.nutrition),
|
||||
const SizedBox(height: 32),
|
||||
],
|
||||
),
|
||||
@@ -208,30 +209,26 @@ class _DiaryScreenState extends State<DiaryScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
_chart() {
|
||||
_chart(NutritionDataModel nutrition) {
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(
|
||||
1924,
|
||||
200,
|
||||
'100%',
|
||||
nutrition.dailyNutritionIntake.carbohydrates,
|
||||
nutrition.dailyNutritionRecommendation.carbohydrates,
|
||||
Color(0xFFFF9500),
|
||||
),
|
||||
ChartData(
|
||||
1925,
|
||||
50,
|
||||
'100%',
|
||||
nutrition.dailyNutritionIntake.fats,
|
||||
nutrition.dailyNutritionRecommendation.fats,
|
||||
Color(0xFFFF3B30),
|
||||
),
|
||||
ChartData(
|
||||
1926,
|
||||
70,
|
||||
'100%',
|
||||
nutrition.dailyNutritionIntake.proteins,
|
||||
nutrition.dailyNutritionRecommendation.proteins,
|
||||
Color(0xFF4CD964),
|
||||
),
|
||||
ChartData(
|
||||
1926,
|
||||
70,
|
||||
'100%',
|
||||
nutrition.dailyNutritionIntake.energy,
|
||||
nutrition.dailyNutritionRecommendation.energy,
|
||||
Color(0xFF007AFF),
|
||||
),
|
||||
];
|
||||
@@ -257,38 +254,126 @@ class _DiaryScreenState extends State<DiaryScreen> {
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
Transform.rotate(
|
||||
angle: -1.5708,
|
||||
child: ClipRect(
|
||||
child: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
widthFactor: 0.5,
|
||||
child: SfCircularChart(
|
||||
series: <CircularSeries>[
|
||||
RadialBarSeries<ChartData, int>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
pointColorMapper: (ChartData data, _) => data.color,
|
||||
trackColor: Color.fromRGBO(59, 130, 246, 1),
|
||||
trackOpacity: 0.1,
|
||||
gap: "8%",
|
||||
radius: "110%",
|
||||
innerRadius: '20%',
|
||||
cornerStyle: CornerStyle.bothCurve,
|
||||
),
|
||||
],
|
||||
SfRadialGauge(
|
||||
axes: <RadialAxis>[
|
||||
RadialAxis(
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
minimum: 0,
|
||||
maximum: 100,
|
||||
showLabels: false,
|
||||
showTicks: false,
|
||||
radiusFactor: 0.8,
|
||||
axisLineStyle: AxisLineStyle(
|
||||
thickness: 0.1,
|
||||
color: Colors.grey[200],
|
||||
thicknessUnit: GaugeSizeUnit.factor,
|
||||
),
|
||||
pointers: <GaugePointer>[
|
||||
// Carbohydrates Arc
|
||||
RangePointer(
|
||||
value: (chartData[0].intake / chartData[0].recommendation) * 100,
|
||||
width: 0.1,
|
||||
color: chartData[0].color,
|
||||
sizeUnit: GaugeSizeUnit.factor,
|
||||
enableAnimation: true,
|
||||
cornerStyle: CornerStyle.bothCurve, // Rounded ends
|
||||
),
|
||||
// Fats Arc
|
||||
RangePointer(
|
||||
value: (chartData[1].intake / chartData[1].recommendation) * 100,
|
||||
width: 0.1,
|
||||
color: chartData[1].color,
|
||||
sizeUnit: GaugeSizeUnit.factor,
|
||||
enableAnimation: true,
|
||||
cornerStyle: CornerStyle.bothCurve,
|
||||
pointerOffset: -0.12,
|
||||
),
|
||||
// Proteins Arc
|
||||
RangePointer(
|
||||
value: (chartData[2].intake / chartData[2].recommendation) * 100,
|
||||
width: 0.1,
|
||||
color: chartData[2].color,
|
||||
sizeUnit: GaugeSizeUnit.factor,
|
||||
enableAnimation: true,
|
||||
cornerStyle: CornerStyle.bothCurve,
|
||||
pointerOffset: -0.24,
|
||||
),
|
||||
// Calories Arc
|
||||
RangePointer(
|
||||
value: (chartData[3].intake / chartData[3].recommendation) * 100,
|
||||
width: 0.1,
|
||||
color: chartData[3].color,
|
||||
sizeUnit: GaugeSizeUnit.factor,
|
||||
enableAnimation: true,
|
||||
cornerStyle: CornerStyle.bothCurve,
|
||||
pointerOffset: -0.36,
|
||||
),
|
||||
],
|
||||
annotations: <GaugeAnnotation>[
|
||||
// Label for Carbohydrates
|
||||
GaugeAnnotation(
|
||||
widget: Transform.rotate(
|
||||
angle: 30,
|
||||
child: Text(
|
||||
'Углеводы',
|
||||
style: TextStyle(color: Colors.white, fontSize: 12),
|
||||
),
|
||||
),
|
||||
angle: 194,
|
||||
positionFactor: 1,
|
||||
),
|
||||
// Label for Fats
|
||||
GaugeAnnotation(
|
||||
widget: Transform.rotate(
|
||||
angle: 30,
|
||||
child: Text(
|
||||
'Жиры',
|
||||
style: TextStyle(color: Colors.white, fontSize: 12),
|
||||
),
|
||||
),
|
||||
angle: 190,
|
||||
positionFactor: 1.07,
|
||||
),
|
||||
// Label for Proteins
|
||||
GaugeAnnotation(
|
||||
widget: Transform.rotate(
|
||||
angle: 30,
|
||||
child: Text(
|
||||
'Белки',
|
||||
style: TextStyle(color: Colors.white, fontSize: 12),
|
||||
),
|
||||
),
|
||||
angle: 190,
|
||||
positionFactor: 1.19,
|
||||
),
|
||||
// Label for Calories
|
||||
GaugeAnnotation(
|
||||
widget: Transform.rotate(
|
||||
angle: 30,
|
||||
child: Text(
|
||||
'Калории',
|
||||
style: TextStyle(color: Colors.white, fontSize: 12),
|
||||
),
|
||||
),
|
||||
angle: 192,
|
||||
positionFactor: 1.31,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
_chartData('Калории', '0 ккал'),
|
||||
_chartData('Калории',
|
||||
'${nutrition.dailyNutritionIntake.energy.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.energy.toStringAsFixed(0)} ккал'),
|
||||
const SizedBox(height: 8),
|
||||
_chartData('Белки', '0 грамм'),
|
||||
_chartData('Белки',
|
||||
'${nutrition.dailyNutritionIntake.proteins.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.proteins.toStringAsFixed(0)} грамм'),
|
||||
const SizedBox(height: 8),
|
||||
_chartData('Жиры', '0 грамм'),
|
||||
_chartData(
|
||||
'Жиры', '${nutrition.dailyNutritionIntake.fats.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.fats.toStringAsFixed(0)} грамм'),
|
||||
const SizedBox(height: 8),
|
||||
_chartData('Углеводы', '0 грамм'),
|
||||
_chartData('Углеводы',
|
||||
'${nutrition.dailyNutritionIntake.carbohydrates.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.carbohydrates.toStringAsFixed(0)} грамм'),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -795,14 +880,13 @@ class _DiaryScreenState extends State<DiaryScreen> {
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
int x, y;
|
||||
String text;
|
||||
Color color;
|
||||
final double intake;
|
||||
final double recommendation;
|
||||
final Color color;
|
||||
|
||||
ChartData(
|
||||
this.x,
|
||||
this.y,
|
||||
this.text,
|
||||
this.intake,
|
||||
this.recommendation,
|
||||
this.color,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user