flutter-learn/lib/todo/todo_form.dart

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)),
          )
        ],
      ),
    );
  }
}