taskFlow

taskFlow is a premium, gamified task management UI concept built with Flutter. It aims to bridge the gap between productivity and life balance through a sleek, futuristic dark-themed interface, intuitive task tracking, and visual progress indicators.

📱 Previews

Home

Collection Details

Add Task

---

✨ Features

• Gamified Experience: Track your progress with XP, level-ups, and day streaks to keep the momentum going.
• Activity Heatmap: Visualize your consistency over the last 12 weeks with a GitHub-style contribution grid.
• Smart Categorization: Organize your life into "Task Collections" like Work Projects, Personal Goals, and Health.
• AI-Powered Focus: Dedicated sections for AI-driven suggestions and priority management.
• Focus Mode: (UI Ready) A deep-work interface designed to minimize distractions and track "Focus Time."
• Dynamic UI Components: Custom-built animated backgrounds, sliver headers, and glassmorphic cards.

🛠️ Project Structure

The project follows a modular view-based architecture for high maintainability:

lib
├── app             # Theme data, global colors, and app-wide strings
├── model           # Data models for Tasks and Collections
├── util            # Extension methods and helper functions
└── view            # UI implementation
    ├── home        # Main dashboard with quick stats and collections
    ├── collection  # Detailed view for specific categories + Heatmaps
    ├── focus       # Immersive timer and focus mode UI
    └── add_task    # Form-driven UI for task entry and editing

🎨 Design Language

• Theme: Deep Dark (Midnight) with high-contrast neon accents.
• Typography: Clean, sans-serif fonts focused on readability.
• Interactions: Micro-interactions through custom animated widgets and feedback dialogs.

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/znissou/taskflow-app.git

2. Install dependencies:

flutter pub get

3. Run the app:

flutter run

---

🏗️ Technical Highlights

• Custom Slivers: Used animated_header_sliver.dart for smooth scrolling effects in collection details.
• Stateful Animations: Custom animated_background.dart used in Focus and Collection views to create an immersive atmosphere.
• Responsive Layouts: Utilizes custom-built quick_stats_row.dart and collection_card.dart for a consistent experience across different screen sizes.

---

Note: This project is a UI/UX showcase. While the models are structured for data, the current focus is on the implementation of the design and transitions.