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

feat:增加common框架

Browse Source
This commit is contained in:
Cxx0822
2025-11-23 20:17:10 +08:00
parent 8795279d8a
commit 607b27d54f
26 changed files with 208 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
lib/widgets/awesome_dialog.dart
View File

@@ -1,68 +0,0 @@
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/material.dart';
void showAwesomeDialog({
required BuildContext context,
required Widget body,
required VoidCallback onOk,
required VoidCallback onCancel,
}) {
AwesomeDialog(
context: context,
dialogType: DialogType.noHeader,
animType: AnimType.scale,
body: body,
dialogBackgroundColor: Theme.of(context).colorScheme.surfaceContainer,
btnOkText: "确认",
btnCancelText: "取消",
btnOkColor: Colors.orange,
btnCancelColor: Colors.grey,
buttonsBorderRadius: BorderRadius.circular(10),
headerAnimationLoop: false,
dismissOnTouchOutside: false,
dismissOnBackKeyPress: true,
btnOk: ElevatedButton(
onPressed: onOk,
style: ElevatedButton.styleFrom(
elevation: 0,
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 6),
textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold, fontFamily: 'CustomFont'),
),
child: Text("确认"),
),
btnCancelOnPress: onCancel,
).show();
}
// 显示成功提示
void showSuccessDialog(BuildContext context, String message) {
AwesomeDialog(
context: context,
dialogType: DialogType.success,
animType: AnimType.scale,
title: message,
btnOkText: "好的",
btnOkColor: Colors.green,
btnOkOnPress: () {},
autoHide: Duration(seconds: 2),
).show();
}
// 显示失败提示
void showErrorDialog(BuildContext context, String message) {
AwesomeDialog(
context: context,
dialogType: DialogType.error,
animType: AnimType.scale,
title: message,
btnOkText: "好的",
btnOkColor: Colors.red,
btnOkOnPress: () {},
autoHide: Duration(seconds: 2),
).show();
}

1
lib/widgets/calendar_form.dart
View File

@@ -1,6 +1,5 @@
import 'package:flisp_app/models/calendar.dart';
import 'package:flisp_app/provider/calendar_provider.dart';
import 'package:flisp_app/utils/date_utils.dart';
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

1
lib/widgets/calendar_widget.dart
View File

@@ -2,6 +2,7 @@ import 'package:flisp_app/models/calendar.dart';
import 'package:flisp_app/provider/calendar_provider.dart';
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/widget/dialog_widget.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

291
lib/widgets/chart.dart
View File

@@ -1,291 +0,0 @@
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class ChartData {
final String name;
final double value;
ChartData({required this.name, required this.value});
}
Widget buildChartTitle(BuildContext context, String title, IconData icon) {
return Row(
children: [
Icon(icon, color: Theme.of(context).colorScheme.primary),
Text(title),
],
);
}
Widget buildChartDivider(BuildContext context) {
return Divider(
height: 1,
thickness: 1,
color: Theme.of(context).colorScheme.primary,
indent: 0,
endIndent: 0,
);
}
Widget lineChart({
required BuildContext context,
required String xAxisName,
required String yAxisName,
required String unit,
required List<ChartData> data,
}) {
return SfCartesianChart(
// 图表标题
// title: ChartTitle(text: '2023年上半年销售额（万元）'),
// X轴配置（类别轴）
primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)),
// Y轴配置（数值轴）
// primaryYAxis: NumericAxis(title: AxisTitle(text: '$yAxisName（$unit）')),
// 启用图例
legend: Legend(isVisible: true, position: LegendPosition.top),
// 启用交互提示（点击数据点显示详情）
tooltipBehavior: TooltipBehavior(
enable: true,
format: 'point.x: point.y $unit',
),
// 折线图数据系列
series: [
LineSeries<ChartData, String>(
dataSource: data,
// X轴数据映射
xValueMapper: (ChartData chart, _) => chart.name,
// Y轴数据映射
yValueMapper: (ChartData chart, _) => chart.value,
// 线条颜色
color: Theme.of(context).colorScheme.primary,
// 线条宽度
width: 3,
// 数据点样式
markerSettings: const MarkerSettings(
isVisible: true,
color: Colors.white,
shape: DataMarkerType.circle,
height: 6,
width: 6,
),
// 折线名称（会显示在图例中）
name: yAxisName,
// 启用数据标签（直接显示数值）
dataLabelSettings: const DataLabelSettings(
isVisible: true,
color: Colors.white,
opacity: 0,
),
// 动画效果
animationDuration: 2000, // 动画时长（毫秒）
),
],
);
}
Widget barChart({
required BuildContext context,
required String xAxisName,
required String yAxisName,
required String unit,
required List<ChartData> data,
}) {
return SfCartesianChart(
// X轴配置（类别轴）
primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)),
// Y轴配置（数值轴）
// primaryYAxis: NumericAxis(title: AxisTitle(text: '$yAxisName（$unit）')),
// 启用交互提示
tooltipBehavior: TooltipBehavior(
enable: true,
format: 'point.x: point.y $unit',
),
// 柱状图数据系列
series: [
ColumnSeries<ChartData, String>(
dataSource: data,
// X轴数据映射
xValueMapper: (ChartData chart, _) => chart.name,
// Y轴数据映射
yValueMapper: (ChartData chart, _) => chart.value,
// 名称
name: yAxisName,
// 柱子颜色
color: Theme.of(context).colorScheme.primary,
// 柱子宽度（0-1之间，1表示占满类别间隔）
width: 0.6,
// 柱子边框
borderWidth: 1,
borderColor: Colors.black12,
// 数据标签
dataLabelSettings: const DataLabelSettings(
isVisible: true,
color: Colors.white,
opacity: 0,
alignment: ChartAlignment.center,
),
// 动画效果
animationDuration: 2000,
),
],
);
}
Widget doubleBarChart({
required BuildContext context,
required String xAxisName,
required String yAxisName,
required String unit,
required List<ChartData> data1,
required List<ChartData> data2,
required String series1Name,
required String series2Name,
}) {
return SfCartesianChart(
// X轴配置（类别轴）
primaryXAxis: CategoryAxis(majorGridLines: const MajorGridLines(width: 0)),
// Y轴配置（数值轴）
// primaryYAxis: NumericAxis(title: AxisTitle(text: '$yAxisName（$unit）')),
// 图例配置
legend: Legend(
isVisible: true,
position: LegendPosition.top,
overflowMode: LegendItemOverflowMode.wrap,
),
// 启用交互提示
tooltipBehavior: TooltipBehavior(
enable: true,
format: 'series.name: point.y $unit',
),
// 双柱状图数据系列
series: <ColumnSeries<ChartData, String>>[
ColumnSeries<ChartData, String>(
dataSource: data1,
// X轴数据映射
xValueMapper: (ChartData chart, _) => chart.name,
// Y轴数据映射
yValueMapper: (ChartData chart, _) => chart.value,
// 系列名称
name: series1Name,
// 柱子颜色
color: Theme.of(context).colorScheme.primary,
// 柱子宽度
width: 0.3,
// 柱子边框
borderWidth: 1,
borderColor: Colors.black12,
// 数据标签
dataLabelSettings: const DataLabelSettings(
isVisible: true,
color: Colors.white,
opacity: 0,
alignment: ChartAlignment.center,
),
// 动画效果
animationDuration: 2000,
),
ColumnSeries<ChartData, String>(
dataSource: data2,
// X轴数据映射
xValueMapper: (ChartData chart, _) => chart.name,
// Y轴数据映射
yValueMapper: (ChartData chart, _) => chart.value,
// 系列名称
name: series2Name,
// 柱子颜色
color: Theme.of(context).colorScheme.inversePrimary,
// 柱子宽度
width: 0.3,
// 柱子边框
borderWidth: 1,
borderColor: Colors.black12,
// 数据标签
dataLabelSettings: const DataLabelSettings(
isVisible: true,
color: Colors.white,
opacity: 0,
alignment: ChartAlignment.center,
),
// 动画效果
animationDuration: 2000,
),
],
);
}
Widget pieChart({
required BuildContext context,
required String unit,
required List<ChartData> data,
}) {
// 计算 value 的总和
double sumValue = data.fold(0.0, (sum, item) => sum + item.value);
return SfCircularChart(
// 饼图标题
// title: ChartTitle(text: '菜谱类别占比分布'),
// 启用图例
legend: const Legend(isVisible: true, position: LegendPosition.right),
// 启用交互提示（点击扇区显示详情）
tooltipBehavior: TooltipBehavior(
enable: true,
format: 'point.x: point.y $unit',
),
// 饼图系列配置
series: [
PieSeries<ChartData, String>(
dataSource: data,
// 类别映射（饼图扇区名称）
xValueMapper: (ChartData data, _) => data.name,
// 数值映射（扇区大小占比）
yValueMapper: (ChartData data, _) => data.value,
// 扇区半径（0-1之间，1表示充满容器）
// radius: '50%',
// 启用扇区分离效果
explode: true,
// 指定分离的扇区索引（这里分离第一个扇区）
explodeIndex: 0,
// 分离距离
explodeOffset: '5%',
dataLabelMapper: (ChartData data, _) {
final percentage = (data.value / sumValue * 100).toStringAsFixed(0);
return '$percentage%';
},
// 数据标签（显示在扇区上的文本）
dataLabelSettings: DataLabelSettings(isVisible: true),
// 动画效果
animationDuration: 2000,
),
],
);
}

52
lib/widgets/common.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_common/widget/dialog_widget.dart';
import 'package:toggle_switch/toggle_switch.dart';
OutlineInputBorder buildFormBoard() {
@@ -22,28 +23,6 @@ OutlineInputBorder buildFormFocusedBoard(ColorScheme colors) {
);
}
// 卡片
class BuildCard extends StatelessWidget {
final Widget? child;
const BuildCard({super.key, this.child});
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Container(
decoration: BoxDecoration(
color: colors.surfaceContainer,
borderRadius: BorderRadius.circular(12),
// border: Border.all(color: colors.outline.withAlpha(50), width: 1),
),
padding: const EdgeInsets.all(16),
child: child,
);
}
}
// 底部弹出
void buildModalBottom({
required BuildContext context,
@@ -152,35 +131,6 @@ Widget buildDismissible({
);
}
// 确认对话框
Future<bool?> showConfirmDialog(BuildContext context, String text) async {
final colors = Theme.of(context).colorScheme;
return showDialog<bool>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('确认'),
backgroundColor: colors.surfaceContainer,
content: Text(text),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: Text(
'取消',
style: TextStyle(color: colors.secondary.withAlpha(150)),
),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text('确认', style: TextStyle(color: colors.primary)),
),
],
);
},
);
}
Widget _buildDismissBackground() {
return Container(
color: Colors.red,

26
lib/widgets/flisp_form.dart
View File

@@ -1,9 +1,9 @@
import 'package:file_picker/file_picker.dart';
import 'package:flisp_app/models/flisp.dart';
import 'package:flisp_app/provider/flisp_provider.dart';
import 'package:flisp_app/utils/minio_utils.dart';
import 'package:flisp_app/widgets/flisp_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/utils/minio_utils.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:provider/provider.dart';
@@ -28,6 +28,7 @@ class FlispForm extends StatefulWidget {
class _FlispFormState extends State<FlispForm> {
bool _showTagOptions = false;
final int maxContentCount = 100;
final String bucketName = 'flisp';
@override
void initState() {
@@ -52,7 +53,7 @@ class _FlispFormState extends State<FlispForm> {
final provider = Provider.of<FlispProvider>(context, listen: false);
setState(() {
provider.formItem.imageUrl =
'${MinIOHelper().rustfsFileUrl}/${MinIOHelper().bucketName}/$fileName';
'${MinIOHelper().fileUrl}/$bucketName/$fileName';
});
}
@@ -97,18 +98,18 @@ class _FlispFormState extends State<FlispForm> {
maxLines: 8,
maxLength: maxContentCount,
buildCounter: (
context, {
required currentLength,
required isFocused,
maxLength,
}) {
context, {
required currentLength,
required isFocused,
maxLength,
}) {
return Text(
'$currentLength/$maxContentCount',
style: TextStyle(
color:
currentLength > maxLength!
? Colors.red
: Theme.of(context).colorScheme.primary,
currentLength > maxLength!
? Colors.red
: Theme.of(context).colorScheme.primary,
),
);
},
@@ -156,7 +157,10 @@ class _FlispFormState extends State<FlispForm> {
if (result != null) {
PlatformFile file = result.files.first;
final fileName = await MinIOHelper().uploadFile(file: file);
final fileName = await MinIOHelper().uploadFile(
bucketName: bucketName,
file: file,
);
_selectImage(fileName);
}
}

5
lib/widgets/flisp_widget.dart
View File

@@ -1,6 +1,7 @@
import 'package:flisp_app/models/flisp.dart';
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/widget/common_widget.dart';
import 'package:intl/intl.dart';
Widget buildFlispStatsCard(BuildContext context, List<Flisp> flisps) {
@@ -10,7 +11,7 @@ Widget buildFlispStatsCard(BuildContext context, List<Flisp> flisps) {
int workCount = flisps.where((flisp) => flisp.tag == FlispTag.work).length;
int studyCount = flisps.where((flisp) => flisp.tag == FlispTag.study).length;
return BuildCard(
return CommonCard(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
@@ -275,7 +276,7 @@ Widget _buildFlispItem({
context: context,
id: flisp.id,
onDelete: () => onDelete(flisp),
child: BuildCard(
child: CommonCard(
child: InkWell(
onTap: () => onEdit(flisp),
child: Column(

4
lib/widgets/stats.dart
View File

@@ -1,5 +1,5 @@
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/widget/common_widget.dart';
class StatisticCard extends StatelessWidget {
final IconData icon;
@@ -19,7 +19,7 @@ class StatisticCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BuildCard(
return CommonCard(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [

5
lib/widgets/todo_widget.dart
View File

@@ -2,6 +2,7 @@ import 'package:flisp_app/models/todo.dart';
import 'package:flisp_app/utils/todo_utils.dart';
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/widget/common_widget.dart';
import 'package:intl/intl.dart';
// 统计卡片
@@ -12,7 +13,7 @@ Widget buildTodoStatsCard(BuildContext context, List<Todo> todos) {
int completedCount = todos.where((todo) => todo.isCompleted).length;
return BuildCard(
return CommonCard(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
@@ -94,7 +95,7 @@ Widget _buildTodoItem({
context: context,
id: todo.id,
onDelete: () => onDelete(todo),
child: BuildCard(
child: CommonCard(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 0),
leading: SizedBox(

119
lib/widgets/year_selector.dart
View File

@@ -1,119 +0,0 @@
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
class YearSelector extends StatefulWidget {
final int initialYear;
final int? minYear;
final int? maxYear;
final Function(int) onYearChanged;
const YearSelector({
super.key,
required this.initialYear,
required this.onYearChanged,
this.minYear,
this.maxYear,
});
@override
State<YearSelector> createState() => _YearSelectorState();
}
// SingleTickerProviderStateMixin 动画控制器
class _YearSelectorState extends State<YearSelector>
with SingleTickerProviderStateMixin {
late int _currentYear;
// 用于动画效果
late AnimationController _animationController;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_currentYear = widget.initialYear;
// 初始化动画控制器
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 200),
);
// 缩放动画
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
/// 切换到上一年
void _previousYear() {
if (widget.minYear == null || _currentYear > widget.minYear!) {
_animateYearChange(() {
setState(() {
_currentYear--;
});
widget.onYearChanged(_currentYear);
});
}
}
/// 切换到下一年
void _nextYear() {
if (widget.maxYear == null || _currentYear < widget.maxYear!) {
_animateYearChange(() {
setState(() {
_currentYear++;
});
widget.onYearChanged(_currentYear);
});
}
}
/// 年份变化时的动画效果
void _animateYearChange(VoidCallback onComplete) {
_animationController.forward().then((_) {
onComplete();
_animationController.reverse();
});
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
circleIconButton(
context: context,
icon: Icons.chevron_left,
onPressed: () => _previousYear(),
),
// 年份显示
AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(scale: _scaleAnimation.value, child: child);
},
child: Text(
'$_currentYear',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primary,
),
),
),
circleIconButton(
context: context,
icon: Icons.chevron_right,
onPressed: () => _nextYear(),
)
],
);
}
}