modify icon & add notify function
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class TodoForm extends StatefulWidget {
|
||||
const TodoForm({super.key});
|
||||
|
||||
@override
|
||||
State<TodoForm> createState() => _TodoFormState();
|
||||
}
|
||||
|
||||
class _TodoFormState extends State<TodoForm> {
|
||||
final Color primaryPurple = const Color(0xFF6542D0);
|
||||
final Color bgLight = const Color(0xFFF8F9FA);
|
||||
|
||||
// 表單資料狀態 (可視需求綁定至 API)
|
||||
String _selectedGroup = 'Work';
|
||||
DateTime _startDate = DateTime.now();
|
||||
DateTime _endDate = DateTime.now().add(const Duration(days: 30));
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: bgLight,
|
||||
appBar: AppBar(
|
||||
backgroundColor: bgLight,
|
||||
elevation: 0,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new, color: Colors.black87),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
title: const Text('Add Project', style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold)),
|
||||
centerTitle: true,
|
||||
actions: [
|
||||
IconButton(icon: const Icon(Icons.notifications_outlined, color: Colors.black87), onPressed: () {})
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildDropdownField('Task Group', _selectedGroup, Icons.work_outline),
|
||||
const SizedBox(height: 24),
|
||||
_buildTextField('Project Name', 'Grocery Shopping App', isMultiline: false),
|
||||
const SizedBox(height: 24),
|
||||
_buildTextField('Description', 'This application is designed for super shops...', isMultiline: true),
|
||||
const SizedBox(height: 24),
|
||||
_buildDatePicker('Start Date', _startDate, true),
|
||||
const SizedBox(height: 24),
|
||||
_buildDatePicker('End Date', _endDate, false),
|
||||
const SizedBox(height: 24),
|
||||
_buildLogoSelector(),
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// 底部大型送出按鈕
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryPurple,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
elevation: 5,
|
||||
shadowColor: primaryPurple.withOpacity(0.5)
|
||||
),
|
||||
onPressed: () {
|
||||
// 觸發 API 儲存邏輯
|
||||
Navigator.pop(context);
|
||||
},
|
||||
child: const Text('Add Project', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// --- 輔助表單元件 ---
|
||||
|
||||
Widget _buildDropdownField(String label, String value, IconData icon) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: DropdownButtonHideUnderline(
|
||||
child: DropdownButton<String>(
|
||||
value: value,
|
||||
isExpanded: true,
|
||||
icon: const Icon(Icons.arrow_drop_down, color: Colors.black54),
|
||||
items: ['Work', 'Personal', 'Study'].map((String val) {
|
||||
return DropdownMenuItem<String>(
|
||||
value: val,
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(color: Colors.pink.shade50, borderRadius: BorderRadius.circular(10)),
|
||||
child: Icon(icon, color: Colors.pinkAccent, size: 20),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
Text(val, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
onChanged: (newValue) {
|
||||
if (newValue != null) setState(() => _selectedGroup = newValue);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTextField(String label, String placeholder, {bool isMultiline = false}) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
TextFormField(
|
||||
initialValue: placeholder,
|
||||
maxLines: isMultiline ? 4 : 1,
|
||||
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.black87),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
isDense: true,
|
||||
contentPadding: EdgeInsets.only(top: 8),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDatePicker(String label, DateTime date, bool isStart) {
|
||||
// 實務上這裡會加上 onTap 呼叫 showDatePicker
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(color: const Color(0xFFF0EFFF), borderRadius: BorderRadius.circular(10)),
|
||||
child: Icon(Icons.calendar_month, color: primaryPurple, size: 20),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
||||
const SizedBox(height: 4),
|
||||
Text('01 May, 2022', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black87)), // Mock 字串
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const Icon(Icons.arrow_drop_down, color: Colors.black54)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLogoSelector() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.05), blurRadius: 10, offset: const Offset(0, 5))]),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(backgroundColor: Colors.teal, radius: 24, child: Text('GS', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
Text('Grocery', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.teal)),
|
||||
Text('shop', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.orange)),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
TextButton(
|
||||
style: TextButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFF0EFFF),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))
|
||||
),
|
||||
onPressed: () {},
|
||||
child: Text('Change Logo', style: TextStyle(color: primaryPurple, fontWeight: FontWeight.bold)),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user