Skip to content

flicherr/taskmgr-frontend

Repository files navigation

taskmgr.

An Android-focused Flutter client for managing personal tasks through a token-authenticated HTTP API.

Flutter MVVM-inspired Provider go_router HTTP JSON API

Login screen Active tasks screen Task calendar Profile screen
Authentication Active tasks Calendar Profile

Overview

taskmgr. is a Flutter frontend for a client-server task management application.

The client provides sign-in and account registration, separates active and completed tasks, supports task creation and editing, moves tasks between workflow states, displays task events in a calendar, and exposes basic account actions through a profile screen.

The application communicates with a separate backend through an HTTP/JSON API. Authentication returns a token that is stored locally with flutter_secure_storage and attached to subsequent task and user requests.

The source is organized around an MVVM-inspired separation of entities, API/data services, ChangeNotifier view models, and Flutter widgets.

The backend server is not included in this repository. A compatible API must be running and reachable from the Android device or emulator.

Features

  • Sign in with email and password
  • Register a new account with name, email, and password
  • Secure local storage of the authentication token
  • Automatic redirect to task screens when a stored session token exists
  • View active tasks
  • Create new tasks
  • Inspect task details
  • Edit task title and description
  • Mark active tasks as completed
  • Delete active or completed tasks
  • View completed tasks and their completion dates
  • Restore completed tasks to the active list
  • Pull-to-refresh task lists
  • Calendar view for task events
  • Monthly and expandable weekly calendar presentation
  • View user name and email
  • Log out
  • Delete the current account
  • Persistent shell navigation between task, calendar, and profile screens

Screens

Authentication

The first screen switches between login and registration modes.

Login screen Registration screen
Login Registration

The view model tracks the form state, disables submission until credentials are provided, displays a progress indicator while authentication is running, and maps API failures to network, credential, or generic error messages.

Active tasks

Active task list

Active tasks are loaded from the /tasks/active API endpoint and displayed as a scrollable list of cards.

A task can be:

  • opened for detailed inspection;
  • marked as completed;
  • edited;
  • deleted.

The floating action button opens the task creation dialog.

Active task details Task editor
Task details Create / edit task

After a mutation, the view model fetches the active task list again and publishes the refreshed state through ChangeNotifier.

Completed tasks

Completed task list Completed task details
Completed tasks Completed task details

Completed tasks are loaded independently from /tasks/inactive.

The detail dialog exposes two actions:

  • return the task to the active list;
  • delete the task.

Completion dates returned by the backend are displayed in the task list.

Task calendar

Task event calendar

The calendar maps task data to colored events. It supports an expanded monthly view and a collapsible weekly presentation.

Tasks use createDate as the event start and plannedDate as the event end when a planned date is available.

Selecting a day displays the corresponding event list below the calendar.

Profile

Profile screen

The profile screen loads the current user information from the API and displays:

  • name;
  • email.

It also provides actions to clear the local session token and log out, or delete the current account through the backend.

Architecture

flowchart LR
    VIEW[Flutter Widgets] --> VM[ChangeNotifier ViewModels]
    VM --> AUTH[AuthService]
    VM --> API[ApiClient]
    AUTH --> SESSION[SessionDataProvider]
    AUTH --> API
    SESSION --> SECURE[flutter_secure_storage]
    API --> HTTP[HTTP / JSON API]
    HTTP --> BACKEND[TaskManager Backend]
Loading

The project uses an MVVM-inspired structure:

Model

The domain layer contains the Task and User entities and the API-facing data logic.

Task represents the task payload returned by the backend:

Task
├── id
├── title
├── description
├── createDate
├── executionDate
├── plannedDate
├── status
└── importance

User contains the account name, email, and optional password used during registration.

Both entities implement JSON mapping for communication with the backend.

View

Flutter widgets render the authentication flow, task lists, dialogs, calendar, and profile.

Navigation is implemented with go_router and a StatefulShellRoute.indexedStack, which keeps four main application branches:

/tasks/active
/tasks/inactive
/tasks/calendar
/tasks/profile

ViewModel

Screen state and user actions are coordinated by ChangeNotifier classes:

View model Responsibility
AuthViewModel Login/registration form state and authentication flow
ActiveTaskListViewModel Active task loading, creation, editing, completion, deletion
InactiveTaskListViewModel Completed task loading, restoration, deletion
CalendarViewModel Conversion of task data into calendar events
ProfileViewModel User information, logout, and account deletion

Provider supplies view models to the widget tree and rebuilds dependent widgets after notifyListeners().

API client

The API layer is implemented with Dart's http package.

The current client expects a backend under an /api base path and uses the following operations:

Method Endpoint Purpose
GET /users/ Authenticate and receive a token
POST /users/ Register a user and receive a token
GET /users/information Load the current user
PUT /users/ Update user data
DELETE /users/ Delete the current account
GET /tasks/active Load active tasks
GET /tasks/inactive Load completed tasks
POST /tasks Create a task
PATCH /tasks/{id} Update a task
DELETE /tasks/{id} Delete a task
PUT /Tasks/{id}/inactive Mark a task as completed
PUT /Tasks/{id}/active Return a task to active tasks

Task and user payloads are serialized as JSON.

Authenticated requests include the stored token in the token request header.

Session handling

After a successful login or registration, the returned token is saved under the session-id key using flutter_secure_storage.

sequenceDiagram
    participant U as User
    participant UI as Auth UI
    participant A as AuthService
    participant API as Backend API
    participant S as Secure Storage

    U->>UI: Submit credentials
    UI->>A: login / signin
    A->>API: HTTP request
    API-->>A: Token
    A->>S: Store token
    UI->>UI: Navigate to active tasks
Loading

Logging out removes the locally stored token.

The current startup redirect considers a session present when a token exists in secure storage. Server-side token validation is delegated to authenticated API requests.

Tech stack

  • Dart
  • Flutter
  • Provider — view-model/state delivery
  • go_router — declarative routing and shell navigation
  • http — REST-style HTTP client
  • flutter_secure_storage — local token storage
  • intl — date formatting/localization support
  • Google Fonts
  • Cupertino and Material widgets

The project requires Dart >=3.3.0 <4.0.0 according to pubspec.yaml.

Project structure

.
├── android/
├── lib/
│   ├── calendar/
│   │   ├── calendar_tile.dart
│   │   ├── flutter_neat_and_clean_calendar.dart
│   │   ├── neat_and_clean_calendar_event.dart
│   │   └── ...
│   ├── configuration/
│   │   └── configuration.dart
│   ├── domain/
│   │   ├── api_client/
│   │   │   └── api_client.dart
│   │   ├── data_provider/
│   │   │   └── session_data_provider.dart
│   │   ├── entity/
│   │   │   ├── task.dart
│   │   │   └── user.dart
│   │   └── services/
│   │       └── auth_service.dart
│   ├── thems/
│   │   ├── colors.dart
│   │   └── styles.dart
│   ├── ui/
│   │   ├── navigation/
│   │   │   └── app_routes.dart
│   │   └── widgets/
│   │       ├── app/
│   │       ├── auth/
│   │       ├── calendar/
│   │       ├── profile/
│   │       └── tasks/
│   └── main.dart
├── web/
├── pubspec.lock
└── pubspec.yaml

Backend configuration

Before running the application, configure the API base URL in:

lib/configuration/configuration.dart

Example:

class Configuration {
  static const host = 'http://192.168.1.100:8080/api';
}

Use an address that is reachable from the Android device or emulator.

The current source tree contains a development LAN address and should be changed for your environment.

Build and run

Requirements

  • Flutter SDK with Dart 3.3 or newer
  • Android SDK
  • Android device or emulator
  • A compatible TaskManager backend API

Install dependencies

flutter pub get

Check the Flutter environment

flutter doctor

Configure the backend

Edit:

lib/configuration/configuration.dart

and set Configuration.host to the backend API base URL.

Run on Android

With an Android device or emulator connected:

flutter run

To select a specific device:

flutter devices
flutter run -d <device-id>

Build an APK

flutter build apk --release

The generated APK is placed under Flutter's build output directory.

Current scope

This repository contains the client application only.

The frontend expects a backend that implements the API contract described above. Without the backend, the UI can be built and launched, but authentication and task/account operations cannot complete successfully.

The Android configuration still uses the template application ID:

com.example.taskmgr

and the current release build configuration uses debug signing. Both should be changed before publishing the application.

About

Flutter task management client with token-based authentication, active and completed tasks, calendar view, profile management, and HTTP/JSON API integration.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors