Cxx0822/food_hub_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:更新图表模块

Browse Source
This commit is contained in:
Cxx0822
2025-07-27 22:28:04 +08:00
parent a2ed0f3d98
commit 34780651a8
7 changed files with 305 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
lib/views/stats.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:food_hub_app/widgets/stats/card.dart';
import 'package:graphic/graphic.dart';
import 'data.dart';
@@ -14,88 +15,210 @@ class _StatsPage extends State<StatsPage> {
var _smooth = false;
var _stepped = false;
final List<Map<String, dynamic>> chartData = const [
{'x': '1月', 'y': 30},
{'x': '2月', 'y': 45},
{'x': '3月', 'y': 28},
{'x': '4月', 'y': 55},
{'x': '5月', 'y': 40},
{'x': '6月', 'y': 65},
];
// @override
// Widget build(BuildContext context) {
// return SingleChildScrollView(
// child: Center(
// child: Column(
// children: <Widget>[
// Container(
// margin: const EdgeInsets.only(top: 10),
// width: 350,
// height: 300,
// child: Chart(
// data: basicData,
// variables: {
// 'genre': Variable(
// accessor: (Map map) => map['genre'] as String,
// ),
// 'sold': Variable(accessor: (Map map) => map['sold'] as num),
// },
// marks: [
// IntervalMark(
// label: LabelEncode(
// encoder: (tuple) => Label(tuple['sold'].toString()),
// ),
// elevation: ElevationEncode(
// value: 0,
// updaters: {
// 'tap': {true: (_) => 5},
// },
// ),
// color: ColorEncode(
// value: Defaults.primaryColor,
// updaters: {
// 'tap': {false: (color) => color.withAlpha(100)},
// },
// ),
// ),
// ],
// axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
// selections: {'tap': PointSelection(dim: Dim.x)},
// tooltip: TooltipGuide(),
// crosshair: CrosshairGuide(),
// ),
// ),
// Container(
// padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
// child: const Text(
// 'Transposed Bar Chart',
// style: TextStyle(fontSize: 20),
// ),
// ),
// Container(
// margin: const EdgeInsets.only(top: 10),
// width: 350,
// height: 300,
// child: Chart(
// data: basicData,
// variables: {
// 'genre': Variable(
// accessor: (Map map) => map['genre'] as String,
// ),
// 'sold': Variable(accessor: (Map map) => map['sold'] as num),
// },
// transforms: [Proportion(variable: 'sold', as: 'percent')],
// marks: [
// IntervalMark(
// position: Varset('percent') / Varset('genre'),
// label: LabelEncode(
// encoder: (tuple) => Label(tuple['sold'].toString()),
// ),
// color: ColorEncode(
// variable: 'genre',
// values: Defaults.colors10,
// ),
// modifiers: [StackModifier()],
// ),
// ],
// coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
// ),
// ),
// ],
// ),
// ),
// );
// }
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10),
width: 350,
height: 300,
child: Chart(
data: basicData,
variables: {
'genre': Variable(
accessor: (Map map) => map['genre'] as String,
),
'sold': Variable(accessor: (Map map) => map['sold'] as num),
},
marks: [
IntervalMark(
label: LabelEncode(
encoder: (tuple) => Label(tuple['sold'].toString()),
return Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 3,
children: const [
StatisticCard(
icon: Icons.restaurant_menu,
color: Colors.blue,
title: '菜谱总数',
value: 19,
unit: '个',
),
StatisticCard(
icon: Icons.grid_view_rounded,
color: Colors.green,
title: '菜谱类别',
value: 5,
unit: '种',
),
StatisticCard(
icon: Icons.flag,
color: Colors.orange,
title: '做菜次数',
value: 25,
unit: '个',
),
StatisticCard(
icon: Icons.show_chart,
color: Colors.red,
title: '平均次数',
value: 3.13,
unit: '次/月',
),
],
),
const SizedBox(height: 10),
Expanded(
child: Card(
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
_buildTitleSection(),
Divider(
height: 1,
thickness: 1,
color: Theme.of(context).primaryColor,
indent: 0,
endIndent: 0,
),
elevation: ElevationEncode(
value: 0,
updaters: {
'tap': {true: (_) => 5},
},
),
color: ColorEncode(
value: Defaults.primaryColor,
updaters: {
'tap': {false: (color) => color.withAlpha(100)},
},
),
),
],
axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
selections: {'tap': PointSelection(dim: Dim.x)},
tooltip: TooltipGuide(),
crosshair: CrosshairGuide(),
// 下半部分：图表区
Expanded(child: _buildLineChart()),
],
),
),
),
Container(
padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
child: const Text(
'Transposed Bar Chart',
style: TextStyle(fontSize: 20),
),
),
Container(
margin: const EdgeInsets.only(top: 10),
width: 350,
height: 300,
child: Chart(
data: basicData,
variables: {
'genre': Variable(
accessor: (Map map) => map['genre'] as String,
),
'sold': Variable(accessor: (Map map) => map['sold'] as num),
},
transforms: [Proportion(variable: 'sold', as: 'percent')],
marks: [
IntervalMark(
position: Varset('percent') / Varset('genre'),
label: LabelEncode(
encoder: (tuple) => Label(tuple['sold'].toString()),
),
color: ColorEncode(
variable: 'genre',
values: Defaults.colors10,
),
modifiers: [StackModifier()],
),
],
coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
),
),
],
),
),
],
),
);
}
// 构建标题区域
Widget _buildTitleSection() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
children: const [
Icon(Icons.show_chart, size: 24),
SizedBox(width: 5),
Text('月度数据趋势统计', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
);
}
Widget _buildLineChart() {
return Chart(
data: chartData,
variables: {
'date': Variable(
accessor: (Map map) => map['x'] as String,
scale: OrdinalScale(
tickCount: 5, // x轴刻度数量
),
),
'points': Variable(
accessor: (Map map) => (map['y'] ?? double.nan) as num,
),
},
marks: [
LineMark(
shape: ShapeEncode(value: BasicLineShape(smooth: false)),
size: SizeEncode(value: 1.5),
),
],
axes: [Defaults.horizontalAxis, Defaults.verticalAxis]
);
}
}

19
lib/widgets/common/index.dart
View File

@@ -27,6 +27,25 @@ InputDecoration formInputDecoration({
);
}
Widget circleIconButton({
required IconData icon,
required VoidCallback onPressed,
required BuildContext context,
}) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
fixedSize: Size(32, 32),
shape: CircleBorder(),
elevation: 0,
backgroundColor: Theme.of(context).primaryColor,
padding: EdgeInsets.zero,
minimumSize: const Size(0, 0),
),
child: Icon(icon, color: Colors.white, size: 18),
);
}
/// 确认按钮样式
ButtonStyle primaryButtonStyle() {
return ButtonStyle(

24
lib/widgets/common/year_selector.dart
View File

@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:food_hub_app/widgets/common/index.dart';
class YearSelector extends StatefulWidget {
final int initialYear;
@@ -88,15 +88,11 @@ class _YearSelectorState extends State<YearSelector>
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TDButton(
circleIconButton(
context: context,
icon: Icons.chevron_left,
size: TDButtonSize.small,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
onTap: () => _previousYear(),
onPressed: () => _previousYear(),
),
SizedBox(width: 10),
// 年份显示
AnimatedBuilder(
animation: _scaleAnimation,
@@ -112,15 +108,11 @@ class _YearSelectorState extends State<YearSelector>
),
),
),
SizedBox(width: 10),
TDButton(
circleIconButton(
context: context,
icon: Icons.chevron_right,
size: TDButtonSize.small,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
onTap: () => _nextYear(),
),
onPressed: () => _nextYear(),
)
],
);
}

11
lib/widgets/recipe/calendar.dart
View File

@@ -3,6 +3,7 @@ import 'package:food_hub_app/api/recipe.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/utils/date_util.dart';
import 'package:food_hub_app/utils/index.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
@@ -145,12 +146,10 @@ class _RecipeCalendarState extends State<RecipeCalendar> {
],
),
),
SizedBox(width: 10),
TDButton(
icon: TDIcons.arrow_right,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
circleIconButton(
context: context,
icon: Icons.chevron_right,
onPressed: () => {}
),
],
),

21
lib/widgets/recipe/card.dart
View File

@@ -4,7 +4,7 @@ import 'package:food_hub_app/config/app_config.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/widgets/common/image.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:food_hub_app/widgets/common/index.dart';
class RecipeCard extends StatelessWidget {
final Recipe recipe;
@@ -92,22 +92,15 @@ class RecipeCard extends StatelessWidget {
),
Row(
children: [
TDButton(
circleIconButton(
context: context,
icon: Icons.edit,
size: TDButtonSize.small,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
onTap: () => {},
onPressed: () => {},
),
SizedBox(width: 10),
TDButton(
circleIconButton(
context: context,
icon: Icons.book,
size: TDButtonSize.small,
type: TDButtonType.fill,
shape: TDButtonShape.circle,
theme: TDButtonTheme.primary,
onTap: () => {},
onPressed: () => {},
),
],
),

10
lib/widgets/recipe/timeline.dart
View File

@@ -60,9 +60,15 @@ Widget timelineContainer(List<Record> recordList) {
builder: TimelineTileBuilder.connected(
itemCount: recordList.length,
connectorBuilder:
(context, index, type) => Connector.solidLine(thickness: 2),
(context, index, type) => Connector.solidLine(
thickness: 2,
color: Theme.of(context).primaryColor,
),
indicatorBuilder: (context, index) {
return Indicator.dot(size: 12.0);
return Indicator.dot(
size: 12.0,
color: Theme.of(context).primaryColor,
);
},
contentsBuilder: (context, index) {
return TimelineCard(record: recordList[index]);

58
lib/widgets/stats/card.dart Normal file
View File

@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
class StatisticCard extends StatelessWidget {
final IconData icon;
final Color color;
final String title;
final num value;
final String unit;
const StatisticCard({
super.key,
required this.icon,
required this.color,
required this.title,
required this.value,
required this.unit,
});
@override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
SizedBox(
width: 60,
height: 60,
child: Icon(icon, color: color, size: 42),
),
const SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(title, style: TextStyle(fontSize: 20, color: color)),
const SizedBox(height: 4),
Row(
children: [
Text(
value.toString(),
style: TextStyle(fontSize: 20, color: color),
),
const SizedBox(width: 5),
Text(unit, style: TextStyle(fontSize: 20, color: color)),
],
),
],
),
],
),
),
);
}
}