feat(diary): New charts fl_charts

This commit is contained in:
2024-03-22 10:20:58 +03:00
parent 3c6c79beeb
commit d736479741
4 changed files with 225 additions and 1 deletions

View File

@@ -5,7 +5,7 @@ import 'models/diary_edit_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:image_picker/image_picker.dart';
import 'package:eatvio_app/core/app_export.dart';
import 'package:eatvio_app/widgets/custom_edit_text_form_field.dart';
@@ -888,6 +888,8 @@ class DiaryEditScreen extends StatelessWidget {
);
}
buildBars(BuildContext context, DiaryEditLoadedState state) {}
/// Section Widget
_buildComment(BuildContext context, DiaryEditLoadedState state) {
return Container(

144
lib/widgets/chart_axis.dart Normal file
View File

@@ -0,0 +1,144 @@
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
buildChart(
BuildContext context, List<double> chartPoints, List<String>? dates) {
// Определение осей графика
List<FlSpot> spots = [];
for (int i = 0; i < 4; i++) {
spots.add(
FlSpot((i * 10 / 10) + 1, chartPoints[i]),
);
}
Widget bottomTitleWidgets(
double value, TitleMeta meta, double chartWidth, List<String>? dates) {
if (value % 1 != 0) {
return Container();
}
final style = TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: min(13, 13 * chartWidth / 300),
);
int index = value.toInt();
if (index >= 0 && index < dates!.length) {
// Проверка на допустимый индекс в массиве dates
String formattedDate =
DateFormat('dd.MM').format(DateTime.parse(dates[index]));
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: Text(formattedDate, style: style),
);
} else {
return Container();
}
}
Widget leftTitleWidgets(double value, TitleMeta meta, double chartWidth) {
final style = TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: min(18, 18 * chartWidth / 300),
);
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: Text(meta.formattedValue, style: style),
);
}
return Padding(
padding: const EdgeInsets.only(
left: 12,
right: 20,
),
child: AspectRatio(
aspectRatio: 1,
child: LayoutBuilder(
builder: (context, constraints) {
return LineChart(
LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
maxContentWidth: 100,
tooltipBgColor: Colors.black,
getTooltipItems: mapSpots(),
),
handleBuiltInTouches: true,
getTouchLineStart: (data, index) => 0,
),
lineBarsData: [
LineChartBarData(
color: Colors.pink,
spots: spots,
isCurved: true,
isStrokeCapRound: true,
barWidth: 3,
belowBarData: BarAreaData(
show: false,
),
dotData: const FlDotData(show: false),
),
],
minY: chartPoints.reduce(
(value, element) => value < element ? value : element),
maxY: chartPoints.reduce(
(value, element) => value > element ? value : element),
minX: 1,
maxX: 4,
titlesData: FlTitlesData(
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) =>
leftTitleWidgets(value, meta, constraints.maxWidth),
reservedSize: 56,
),
drawBelowEverything: true,
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) => bottomTitleWidgets(
value, meta, constraints.maxWidth, dates),
reservedSize: 36,
interval: 1,
),
drawBelowEverything: true,
),
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: true,
horizontalInterval: 1.5,
verticalInterval: 5,
checkToShowHorizontalLine: valuteToInt(),
getDrawingHorizontalLine: (_) => FlLine(
color: Colors.blue.withOpacity(1),
dashArray: [8, 2],
strokeWidth: 0.8,
),
getDrawingVerticalLine: (_) => FlLine(
color: Colors.blue.withOpacity(1),
dashArray: [8, 2],
strokeWidth: 0.8,
),
checkToShowVerticalLine: valuteToInt(),
),
borderData: FlBorderData(show: false),
),
);
},
),
),
);
}

View File

@@ -0,0 +1,78 @@
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Nutrition Chart'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 300,
width: 300,
child: BarChart(
BarChartData(
barTouchData: BarTouchData(enabled: false),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
getTextStyles: (value) =>
const TextStyle(color: Colors.black, fontSize: 14),
margin: 10,
showTitles: (double value) {
switch (value.toInt()) {
case 0:
return 'Calories';
case 1:
return 'Protein';
case 2:
return 'Fat';
case 3:
return 'Carbs';
default:
return '';
}
},
),
leftTitles: SideTitles(showTitles: false),
),
borderData: FlBorderData(show: false),
barGroups: [
BarChartGroupData(x: 0, barRods: [
BarChartRodData(y: 200, color: Colors.blue),
BarChartRodData(y: 150, color: Colors.blueAccent),
]),
BarChartGroupData(x: 1, barRods: [
BarChartRodData(y: 50, color: Colors.red),
BarChartRodData(y: 60, color: Colors.deepOrange),
]),
BarChartGroupData(x: 2, barRods: [
BarChartRodData(y: 80, color: Colors.green),
BarChartRodData(y: 70, color: Colors.lightGreen),
]),
BarChartGroupData(x: 3, barRods: [
BarChartRodData(y: 100, color: Colors.orange),
BarChartRodData(y: 120, color: Colors.orangeAccent),
]),
],
),
),
),
],
),
),
),
);
}
}

View File