Cxx0822/flisp_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-11-07 14:33:26 +08:00
parent d7ce7d644a
commit 0f106f6adc
19 changed files with 626 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/widgets/awesome_dialog.dart Normal file
View File

@@ -0,0 +1,54 @@
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: Colors.white,
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: Colors.orange,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 6),
textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
),
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();
}

27
lib/widgets/common.dart
View File

@@ -1,4 +1,3 @@
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/material.dart';
BoxDecoration buildBoxDecoration() {
@@ -11,6 +10,7 @@ BoxDecoration buildBoxDecoration() {
Container buildBody({Widget? child}) {
return Container(
width: double.infinity,
color: Colors.grey[50],
padding: EdgeInsets.all(8),
child: child,
@@ -24,28 +24,3 @@ Container buildCard({Widget? child}) {
child: child,
);
}
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: Colors.white,
btnOkText: "确认",
btnCancelText: "取消",
btnOkColor: Colors.orange,
btnCancelColor: Colors.grey,
buttonsBorderRadius: BorderRadius.circular(10),
headerAnimationLoop: false,
dismissOnTouchOutside: false,
dismissOnBackKeyPress: true,
btnOkOnPress: onOk,
btnCancelOnPress: onCancel,
).show();
}

271
lib/widgets/todo_dialog.dart
View File

@@ -1,271 +0,0 @@
import 'package:flisp_app/store/todo_dialog_store.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flisp_app/models/todo.dart';
import 'package:flisp_app/utils/date_utils.dart';
import 'package:flisp_app/widgets/common.dart';
class TodoDialog extends StatefulWidget {
final bool isEditing;
final TodoItem? initialTodo;
const TodoDialog({
super.key,
required this.isEditing,
this.initialTodo,
});
@override
State<TodoDialog> createState() => _TodoDialogState();
}
class _TodoDialogState extends State<TodoDialog> {
late TextEditingController _titleController;
late TextEditingController _descriptionController;
@override
void initState() {
super.initState();
_titleController = TextEditingController();
_descriptionController = TextEditingController();
// 如果是编辑模式，初始化数据
if (widget.isEditing && widget.initialTodo != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {
final store = Provider.of<TodoDialogStore>(context, listen: false);
store.initEditData(widget.initialTodo!);
});
}
}
@override
void dispose() {
_titleController.dispose();
_descriptionController.dispose();
super.dispose();
}
Future<void> _selectDueDate(BuildContext context) async {
final DateTime? picked = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime(2100),
);
if (picked != null) {
final store = Provider.of<TodoDialogStore>(context, listen: false);
store.dueDate = picked;
}
}
@override
Widget build(BuildContext context) {
final store = Provider.of<TodoDialogStore>(context);
// 同步控制器文本
if (_titleController.text != store.title) {
_titleController.text = store.title;
_titleController.selection = TextSelection.collapsed(offset: store.title.length);
}
if (_descriptionController.text != store.description) {
_descriptionController.text = store.description;
_descriptionController.selection = TextSelection.collapsed(offset: store.description.length);
}
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 标题
Row(
children: [
Icon(Icons.add_task, color: Colors.orange, size: 24),
SizedBox(width: 8),
Text(
widget.isEditing ? '编辑待办事项' : '添加待办事项',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.orange,
),
),
],
),
SizedBox(height: 20),
// 标题输入框
TextField(
controller: _titleController,
onChanged: (value) => store.title = value,
decoration: InputDecoration(
labelText: '标题',
hintText: '请输入待办事项标题...',
counterText: '',
suffixText: '${store.title.length}/20',
suffixStyle: TextStyle(
color: store.title.length > 20 ? Colors.red : Colors.grey,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.orange, width: 1),
),
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.title, color: Colors.black87),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
style: TextStyle(fontSize: 16),
maxLength: 20,
),
SizedBox(height: 12),
// 描述输入框
TextField(
controller: _descriptionController,
onChanged: (value) => store.description = value,
decoration: InputDecoration(
labelText: '内容',
hintText: '请输入待办事项内容...',
counterText: '',
suffixText: '${store.description.length}/50',
suffixStyle: TextStyle(
color: store.description.length > 50 ? Colors.red : Colors.grey,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.orange, width: 1),
),
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.description, color: Colors.black87),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
style: TextStyle(fontSize: 16),
maxLines: 2,
maxLength: 50,
),
SizedBox(height: 12),
// 截止日期选择
Container(
decoration: buildBoxDecoration(),
child: ListTile(
leading: Icon(Icons.calendar_today, color: Colors.blue),
title: Text(
store.dueDate == null
? '选择截止日期'
: '截止: ${formatDate(store.dueDate!)}',
style: TextStyle(
color: store.dueDate == null ? Colors.grey : Colors.black87,
),
),
trailing: store.dueDate != null
? IconButton(
icon: Icon(Icons.clear, size: 18),
onPressed: () {
store.dueDate = null;
},
)
: null,
onTap: () => _selectDueDate(context),
),
),
SizedBox(height: 12),
// 优先级选择
Container(
decoration: buildBoxDecoration(),
child: ListTile(
leading: Container(
padding: EdgeInsets.all(6),
decoration: BoxDecoration(
color: store.priority.color.withAlpha(10),
shape: BoxShape.circle,
),
child: Icon(
Icons.flag,
color: store.priority.color,
size: 18,
),
),
title: Text(
'优先级',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
trailing: DropdownButton<TodoPriority>(
value: store.priority,
underline: SizedBox(),
icon: Icon(Icons.arrow_drop_down, color: Colors.grey.shade600),
iconSize: 20,
dropdownColor: Colors.white,
borderRadius: BorderRadius.circular(12),
onChanged: (value) {
if (value != null) {
store.priority = value;
}
},
items: TodoPriority.values.map((priority) {
return DropdownMenuItem(
value: priority,
child: Container(
padding: EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Container(
padding: EdgeInsets.all(4),
decoration: buildBoxDecoration(),
child: Icon(
priority.icon,
color: priority.color,
size: 14,
),
),
SizedBox(width: 12),
Text(
priority.label,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}).toList(),
),
contentPadding: EdgeInsets.symmetric(horizontal: 16),
minLeadingWidth: 0,
),
),
],
),
);
}
}

292
lib/widgets/todo_form.dart Normal file
View File

@@ -0,0 +1,292 @@
import 'package:flisp_app/provider/todo_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:provider/provider.dart';
import 'package:flisp_app/models/todo.dart';
import 'package:flisp_app/utils/date_utils.dart';
class TodoForm extends StatefulWidget {
final GlobalKey<FormBuilderState> formKey;
final bool isEditing;
final TodoItem? initialTodo;
const TodoForm({
super.key,
required this.formKey,
required this.isEditing,
this.initialTodo,
});
@override
State<TodoForm> createState() => _TodoFormState();
}
class _TodoFormState extends State<TodoForm> {
@override
void initState() {
super.initState();
// 如果是编辑模式，初始化数据
if (widget.isEditing && widget.initialTodo != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {
final store = Provider.of<TodoProvider>(context, listen: false);
store.initForm(widget.initialTodo!);
});
}
}
@override
Widget build(BuildContext context) {
final int maxTitleCount = 10;
final int maxContentCount = 20;
final store = Provider.of<TodoProvider>(context);
Widget buildTitle() {
return Row(
children: [
Icon(
widget.isEditing ? Icons.edit_note : Icons.add_task,
color: Colors.orange,
size: 24,
),
SizedBox(width: 8),
Text(
widget.isEditing ? '编辑待办事项' : '添加待办事项',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.orange,
),
),
],
);
}
FormBuilderTextField buildTitleField() {
return FormBuilderTextField(
name: 'title',
initialValue: store.formItem.title,
onChanged: (value) {
setState(() {
store.formItem.title = value ?? '';
});
},
decoration: InputDecoration(
labelText: '标题',
hintText: '请输入待办事项标题...',
counterText: '',
suffixText: '${store.formItem.title.length}/$maxTitleCount',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.orange),
),
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.title, color: Colors.blue),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
maxLength: maxTitleCount,
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入标题';
}
if (value.length > maxTitleCount) {
return '标题不能超过$maxTitleCount个字符';
}
return null;
},
);
}
FormBuilderTextField buildDescriptionField() {
return FormBuilderTextField(
name: 'description',
initialValue: store.formItem.content,
onChanged: (value) {
setState(() {
store.formItem.content = value ?? '';
});
},
decoration: InputDecoration(
labelText: '内容',
hintText: '请输入待办事项内容...',
counterText: '',
suffixText: '${store.formItem.content.length}/$maxContentCount',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.orange),
),
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.description, color: Colors.green),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
maxLines: 2,
maxLength: maxContentCount,
validator: (value) {
if (value != null && value.length > maxContentCount) {
return '内容不能超过$maxContentCount个字符';
}
return null;
},
);
}
IconButton buildClearDateSuffixIcon() {
return IconButton(
icon: Icon(Icons.clear, size: 18),
onPressed: () {
setState(() {
store.formItem.dueDate = null;
});
widget.formKey.currentState?.fields['dueDate']?.didChange(null);
},
);
}
FormBuilderDateTimePicker buildDateField() {
return FormBuilderDateTimePicker(
name: 'dueDate',
initialValue: store.formItem.dueDate,
inputType: InputType.date,
onChanged: (value) {
setState(() {
store.formItem.dueDate = value;
});
},
decoration: InputDecoration(
labelText:
store.formItem.dueDate == null
? '选择截止日期'
: '截止: ${formatDate(store.formItem.dueDate!)}',
labelStyle: TextStyle(
color:
store.formItem.dueDate == null ? Colors.grey : Colors.black87,
),
prefixIcon: Icon(Icons.calendar_today, color: Colors.purple),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.orange),
),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
suffixIcon:
store.formItem.dueDate != null
? buildClearDateSuffixIcon()
: null,
),
validator: (value) {
if (value != null && value.isBefore(DateTime.now())) {
return '不能选择过去的日期';
}
return null;
},
);
}
FormBuilderRadioGroup builderRadioGroup() {
return FormBuilderRadioGroup<TodoPriority>(
name: 'priority',
initialValue: store.formItem.priority,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
orientation: OptionsOrientation.horizontal,
wrapSpacing: 6,
options:
TodoPriority.values.map((priority) {
return FormBuilderFieldOption<TodoPriority>(
value: priority,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Text(priority.label)],
),
);
}).toList(),
onChanged: (value) {
if (value != null) {
setState(() {
store.formItem.priority = value;
});
}
},
);
}
Container buildPriorityField() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey.shade300, width: 1),
),
padding: EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.flag, color: Colors.orange),
SizedBox(width: 6),
Text('优先级'),
],
),
builderRadioGroup(),
],
),
);
}
FormBuilder buildForm() {
return FormBuilder(
key: widget.formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
buildTitleField(),
SizedBox(height: 12),
buildDescriptionField(),
SizedBox(height: 12),
buildDateField(),
SizedBox(height: 12),
buildPriorityField(),
],
),
);
}
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [buildTitle(), SizedBox(height: 20), buildForm()],
),
);
}
}

37
lib/widgets/todo_widget.dart
View File

@@ -72,7 +72,7 @@ Widget buildTabs({
Widget buildTodoList({
required List<TodoItem> todos,
required ValueChanged<String> onToggleTodo,
required ValueChanged<TodoItem> onEditTodo
required ValueChanged<TodoItem> onEditTodo,
}) {
return ListView.separated(
itemCount: todos.length,
@@ -82,7 +82,7 @@ Widget buildTodoList({
return _buildTodoItem(
todo: todo,
onToggle: onToggleTodo,
onEdit: onEditTodo
onEdit: onEditTodo,
);
},
);
@@ -91,13 +91,18 @@ Widget buildTodoList({
Widget _buildTodoItem({
required TodoItem todo,
required ValueChanged<String> onToggle,
required ValueChanged<TodoItem> onEdit
required ValueChanged<TodoItem> onEdit,
}) {
return buildCard(
child: ListTile(
leading: Checkbox(
value: todo.isCompleted,
onChanged: (value) => onToggle(todo.id),
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 0),
leading: SizedBox(
width: 24,
child: Checkbox(
value: todo.isCompleted,
onChanged: (value) => onToggle(todo.id.toString()),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
),
title: _buildTodoTitle(todo),
subtitle: _buildTodoSubtitle(todo),
@@ -126,8 +131,7 @@ Widget? _buildTodoSubtitle(TodoItem todo) {
todo.dueDate!.isBefore(DateTime.now()) &&
!todo.isCompleted;
final hasContent =
todo.description?.isNotEmpty == true || todo.dueDate != null;
final hasContent = todo.content.isNotEmpty == true || todo.dueDate != null;
if (!hasContent) return null;
@@ -135,9 +139,9 @@ Widget? _buildTodoSubtitle(TodoItem todo) {
direction: Axis.vertical,
spacing: 5,
children: [
if (todo.description?.isNotEmpty == true)
if (todo.content.isNotEmpty == true)
Text(
todo.description!,
todo.content,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
@@ -160,11 +164,7 @@ Widget _buildPriorityBadge(TodoPriority priority) {
return Chip(
label: Text(priority.label),
backgroundColor: priority.color,
labelStyle: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
labelStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(color: Colors.white),
@@ -175,7 +175,7 @@ Widget _buildPriorityBadge(TodoPriority priority) {
}
// 空状态
Widget buildEmptyState(TodoTab currentFilter) {
Widget buildEmptyState(TodoTab tab) {
final messages = {
TodoTab.all: '📝 还没有待办事项\n点击➕号添加第一个任务吧～',
TodoTab.active: '🎯 没有待完成的任务\n享受轻松时光吧！✨',
@@ -188,11 +188,10 @@ Widget buildEmptyState(TodoTab currentFilter) {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.checklist, size: 80, color: Colors.orange.shade600),
const SizedBox(height: 20),
Text(
messages[currentFilter] ?? '暂无数据',
messages[tab] ?? '暂无数据',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.orange.shade600),
style: TextStyle(color: Colors.orange.shade600),
),
],
),