cleanplate/focusflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial scaffold: FocusFlow ADHD Task Manager Flutter app

Browse Source 
BLoC/Cubit state management, ADHD-friendly theme (calming teal, no red),
GetIt DI, GoRouter navigation. Screens: task dashboard, focus mode,
task create/detail, streaks, time perception, settings, onboarding, auth.
Custom widgets: TaskCard, RewardPopup, StreakRing, GentleNudgeCard.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Oracle Public Cloud User
2026-03-04 15:53:58 +00:00
commit 50931d839d
105 changed files with 7750 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
lib/core/error/failures.dart Normal file
View File

@@ -0,0 +1,45 @@
import 'package:equatable/equatable.dart';
/// Base failure type for the application.
///
/// Uses a sealed class hierarchy so `switch` expressions are exhaustive.
sealed class Failure extends Equatable {
final String message;
const Failure(this.message);
@override
List<Object?> get props => [message];
}
/// Returned when the backend API responds with a non-2xx status.
class ServerFailure extends Failure {
final int? statusCode;
const ServerFailure(super.message, {this.statusCode});
@override
List<Object?> get props => [message, statusCode];
}
/// Returned when the device has no network connectivity.
class NetworkFailure extends Failure {
const NetworkFailure([super.message = 'No internet connection. Your changes are saved locally.']);
}
/// Returned when reading / writing the local cache fails.
class CacheFailure extends Failure {
const CacheFailure([super.message = 'Could not access local storage.']);
}
/// Returned for authentication problems (expired token, bad credentials, etc.).
class AuthFailure extends Failure {
const AuthFailure([super.message = 'Authentication failed. Please sign in again.']);
}
/// Returned when user input does not pass validation.
class ValidationFailure extends Failure {
final Map<String, String> fieldErrors;
const ValidationFailure(super.message, {this.fieldErrors = const {}});
@override
List<Object?> get props => [message, fieldErrors];
}

153
lib/core/network/api_client.dart Normal file
View File

@@ -0,0 +1,153 @@
import 'package:dio/dio.dart';
import 'package:focusflow_shared/focusflow_shared.dart';
import 'interceptors/auth_interceptor.dart';
/// Central Dio wrapper for all API communication.
///
/// Registered as a lazy singleton in GetIt so every feature shares
/// the same HTTP client (and therefore the same auth interceptor,
/// retry logic, and error normalisation).
class ApiClient {
late final Dio _dio;
ApiClient() {
_dio = Dio(
BaseOptions(
// TODO: read from env / config
baseUrl: 'https://api.focusflow.app',
connectTimeout: const Duration(seconds: 15),
receiveTimeout: const Duration(seconds: 15),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
),
);
_dio.interceptors.addAll([
AuthInterceptor(),
LogInterceptor(requestBody: true, responseBody: true),
]);
}
// ── Convenience HTTP verbs ───────────────────────────────────────
Future<Response<T>> get<T>(
String path, {
Map<String, dynamic>? queryParameters,
Options? options,
}) =>
_dio.get<T>(path, queryParameters: queryParameters, options: options);
Future<Response<T>> post<T>(
String path, {
Object? data,
Options? options,
}) =>
_dio.post<T>(path, data: data, options: options);
Future<Response<T>> put<T>(
String path, {
Object? data,
Options? options,
}) =>
_dio.put<T>(path, data: data, options: options);
Future<Response<T>> patch<T>(
String path, {
Object? data,
Options? options,
}) =>
_dio.patch<T>(path, data: data, options: options);
Future<Response<T>> delete<T>(
String path, {
Object? data,
Options? options,
}) =>
_dio.delete<T>(path, data: data, options: options);
// ── Auth helpers ─────────────────────────────────────────────────
Future<ApiResponse<Map<String, dynamic>>> login(String email, String password) async {
final response = await post<Map<String, dynamic>>(
ApiConstants.authLogin,
data: {'email': email, 'password': password},
);
return ApiResponse.fromJson(
response.data!,
(json) => json as Map<String, dynamic>,
);
}
Future<ApiResponse<Map<String, dynamic>>> register(
String displayName,
String email,
String password,
) async {
final response = await post<Map<String, dynamic>>(
ApiConstants.authRegister,
data: {
'displayName': displayName,
'email': email,
'password': password,
},
);
return ApiResponse.fromJson(
response.data!,
(json) => json as Map<String, dynamic>,
);
}
Future<void> logout() => post(ApiConstants.authLogout);
// ── Task helpers ─────────────────────────────────────────────────
Future<Response<Map<String, dynamic>>> fetchTasks({
int page = 1,
int limit = 20,
}) =>
get<Map<String, dynamic>>(
ApiConstants.tasks,
queryParameters: {'page': page, 'limit': limit},
);
Future<Response<Map<String, dynamic>>> fetchNextTask() =>
get<Map<String, dynamic>>(ApiConstants.nextTask);
Future<Response<Map<String, dynamic>>> completeTask(String id) =>
post<Map<String, dynamic>>(ApiConstants.completeTask(id));
Future<Response<Map<String, dynamic>>> skipTask(String id) =>
post<Map<String, dynamic>>(ApiConstants.skipTask(id));
Future<Response<Map<String, dynamic>>> createTask(Map<String, dynamic> data) =>
post<Map<String, dynamic>>(ApiConstants.tasks, data: data);
Future<Response<Map<String, dynamic>>> deleteTask(String id) =>
delete<Map<String, dynamic>>(ApiConstants.task(id));
// ── Streak helpers ───────────────────────────────────────────────
Future<Response<Map<String, dynamic>>> fetchStreaks() =>
get<Map<String, dynamic>>(ApiConstants.streaks);
Future<Response<Map<String, dynamic>>> completeStreak(String id) =>
post<Map<String, dynamic>>(ApiConstants.streak(id));
Future<Response<Map<String, dynamic>>> forgiveStreak(String id) =>
post<Map<String, dynamic>>(ApiConstants.forgiveStreak(id));
// ── Reward helpers ───────────────────────────────────────────────
Future<Response<Map<String, dynamic>>> generateReward(String taskId) =>
post<Map<String, dynamic>>(
ApiConstants.generateReward,
data: {'taskId': taskId},
);
// ── Time helpers ─────────────────────────────────────────────────
Future<Response<Map<String, dynamic>>> fetchTimeAccuracy() =>
get<Map<String, dynamic>>(ApiConstants.timeAccuracy);
}

89
lib/core/network/interceptors/auth_interceptor.dart Normal file
View File

@@ -0,0 +1,89 @@
import 'package:dio/dio.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:focusflow_shared/focusflow_shared.dart';
/// Dio interceptor that attaches a JWT Bearer token to every request
/// and transparently refreshes the token on 401 responses.
class AuthInterceptor extends Interceptor {
static const _storage = FlutterSecureStorage();
static const _accessTokenKey = 'ff_access_token';
static const _refreshTokenKey = 'ff_refresh_token';
// ── Attach token on every request ────────────────────────────────
@override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
final token = await _storage.read(key: _accessTokenKey);
if (token != null) {
options.headers['Authorization'] = 'Bearer $token';
}
handler.next(options);
}
// ── Handle 401 — attempt token refresh ───────────────────────────
@override
void onError(DioException err, ErrorInterceptorHandler handler) async {
if (err.response?.statusCode == 401) {
final refreshed = await _tryRefresh();
if (refreshed) {
// Retry the original request with the new token.
final token = await _storage.read(key: _accessTokenKey);
final opts = err.requestOptions;
opts.headers['Authorization'] = 'Bearer $token';
try {
final response = await Dio().fetch(opts);
return handler.resolve(response);
} on DioException catch (e) {
return handler.next(e);
}
}
}
handler.next(err);
}
// ── Token refresh ────────────────────────────────────────────────
Future<bool> _tryRefresh() async {
final refreshToken = await _storage.read(key: _refreshTokenKey);
if (refreshToken == null) return false;
try {
final dio = Dio();
final response = await dio.post<Map<String, dynamic>>(
// Use the same base url; in production this is configured once.
'https://api.focusflow.app${ApiConstants.authRefresh}',
data: {'refreshToken': refreshToken},
);
final data = response.data;
if (data != null && data['status'] == 'success') {
final tokens = data['data'] as Map<String, dynamic>;
await _storage.write(key: _accessTokenKey, value: tokens['accessToken'] as String);
await _storage.write(key: _refreshTokenKey, value: tokens['refreshToken'] as String);
return true;
}
} catch (_) {
// Refresh failed — caller will propagate the original 401.
}
return false;
}
// ── Static helpers for login / logout ────────────────────────────
static Future<void> saveTokens({
required String accessToken,
required String refreshToken,
}) async {
await _storage.write(key: _accessTokenKey, value: accessToken);
await _storage.write(key: _refreshTokenKey, value: refreshToken);
}
static Future<void> clearTokens() async {
await _storage.delete(key: _accessTokenKey);
await _storage.delete(key: _refreshTokenKey);
}
static Future<bool> hasToken() async {
final token = await _storage.read(key: _accessTokenKey);
return token != null;
}
}

72
lib/core/theme/app_colors.dart Normal file
View File

@@ -0,0 +1,72 @@
import 'package:flutter/material.dart';
/// ADHD-friendly color palette.
///
/// Designed around calming, non-aggressive tones that reduce
/// visual anxiety and avoid triggering shame or urgency.
class AppColors {
AppColors._();
// ── Primary palette ──────────────────────────────────────────────
/// Calming teal — the anchor of the app.
static const Color primary = Color(0xFF26A69A);
static const Color primaryLight = Color(0xFF80CBC4);
static const Color primaryDark = Color(0xFF00897B);
// ── Secondary — warmth & rewards ─────────────────────────────────
/// Warm amber for positive reinforcement, rewards, celebrations.
static const Color secondary = Color(0xFFFFB74D);
static const Color secondaryLight = Color(0xFFFFE0B2);
static const Color secondaryDark = Color(0xFFF9A825);
// ── Tertiary — streaks & progress ────────────────────────────────
/// Soft purple for streak visuals and progress indicators.
static const Color tertiary = Color(0xFFAB47BC);
static const Color tertiaryLight = Color(0xFFCE93D8);
static const Color tertiaryDark = Color(0xFF8E24AA);
// ── Backgrounds ──────────────────────────────────────────────────
static const Color backgroundLight = Color(0xFFFAFAFA);
static const Color backgroundDark = Color(0xFF121212);
// ── Surfaces ─────────────────────────────────────────────────────
static const Color surfaceLight = Color(0xFFFFFFFF);
static const Color surfaceDark = Color(0xFF1E1E1E);
static const Color surfaceVariantLight = Color(0xFFF5F5F5);
static const Color surfaceVariantDark = Color(0xFF2C2C2C);
// ── Semantic — intentionally forgiving ───────────────────────────
/// Tasks completed — celebrate!
static const Color completed = Color(0xFF66BB6A);
/// Tasks skipped — neutral gray, no shame.
static const Color skipped = Color(0xFFBDBDBD);
/// Tasks missed — light gray, forgiveness over punishment.
static const Color missed = Color(0xFFE0E0E0);
/// Error — muted coral, not aggressive red.
static const Color error = Color(0xFFE57373);
static const Color errorLight = Color(0xFFFFCDD2);
// ── Reward gold ──────────────────────────────────────────────────
static const Color rewardGold = Color(0xFFFFD54F);
static const Color rewardGoldDark = Color(0xFFFFC107);
// ── Energy levels ────────────────────────────────────────────────
static const Color energyLow = Color(0xFF81C784);
static const Color energyMedium = Color(0xFFFFD54F);
static const Color energyHigh = Color(0xFFFF8A65);
// ── Text ─────────────────────────────────────────────────────────
static const Color textPrimaryLight = Color(0xFF212121);
static const Color textSecondaryLight = Color(0xFF616161);
static const Color textPrimaryDark = Color(0xFFFAFAFA);
static const Color textSecondaryDark = Color(0xFFBDBDBD);
// ── Misc ─────────────────────────────────────────────────────────
static const Color dividerLight = Color(0xFFE0E0E0);
static const Color dividerDark = Color(0xFF424242);
static const Color shimmerBase = Color(0xFFE0E0E0);
static const Color shimmerHighlight = Color(0xFFF5F5F5);
}

354
lib/core/theme/app_theme.dart Normal file
View File

@@ -0,0 +1,354 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'app_colors.dart';
/// ADHD-friendly Material 3 theme.
///
/// Design principles:
/// - Calming primary colors (teal / soft blue) — NO aggressive reds.
/// - High-contrast text for readability.
/// - Large touch targets (minimum 48 dp).
/// - Rounded corners everywhere (16 dp radius).
/// - Gentle animations, no jarring transitions.
/// - Nunito for headers (friendly, rounded), Inter for body.
/// - Subtle, soft card shadows.
class AppTheme {
AppTheme._();
static const double _borderRadius = 16.0;
static final _roundedShape = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(_borderRadius),
);
// ── Typography ───────────────────────────────────────────────────
static TextTheme _buildTextTheme(TextTheme base, Color primary, Color secondary) {
final headlineFont = GoogleFonts.nunitoTextTheme(base);
final bodyFont = GoogleFonts.interTextTheme(base);
return bodyFont.copyWith(
displayLarge: headlineFont.displayLarge?.copyWith(color: primary, fontWeight: FontWeight.w700),
displayMedium: headlineFont.displayMedium?.copyWith(color: primary, fontWeight: FontWeight.w700),
displaySmall: headlineFont.displaySmall?.copyWith(color: primary, fontWeight: FontWeight.w700),
headlineLarge: headlineFont.headlineLarge?.copyWith(color: primary, fontWeight: FontWeight.w700),
headlineMedium: headlineFont.headlineMedium?.copyWith(color: primary, fontWeight: FontWeight.w600),
headlineSmall: headlineFont.headlineSmall?.copyWith(color: primary, fontWeight: FontWeight.w600),
titleLarge: headlineFont.titleLarge?.copyWith(color: primary, fontWeight: FontWeight.w600),
titleMedium: headlineFont.titleMedium?.copyWith(color: primary, fontWeight: FontWeight.w600),
titleSmall: headlineFont.titleSmall?.copyWith(color: primary, fontWeight: FontWeight.w500),
bodyLarge: bodyFont.bodyLarge?.copyWith(color: primary, fontSize: 16),
bodyMedium: bodyFont.bodyMedium?.copyWith(color: secondary, fontSize: 14),
bodySmall: bodyFont.bodySmall?.copyWith(color: secondary, fontSize: 12),
labelLarge: bodyFont.labelLarge?.copyWith(color: primary, fontWeight: FontWeight.w600, fontSize: 16),
labelMedium: bodyFont.labelMedium?.copyWith(color: secondary),
labelSmall: bodyFont.labelSmall?.copyWith(color: secondary),
);
}
// ── Light theme ──────────────────────────────────────────────────
static ThemeData get light {
final colorScheme = ColorScheme.light(
primary: AppColors.primary,
onPrimary: Colors.white,
primaryContainer: AppColors.primaryLight,
onPrimaryContainer: AppColors.primaryDark,
secondary: AppColors.secondary,
onSecondary: Colors.white,
secondaryContainer: AppColors.secondaryLight,
onSecondaryContainer: AppColors.secondaryDark,
tertiary: AppColors.tertiary,
onTertiary: Colors.white,
tertiaryContainer: AppColors.tertiaryLight,
onTertiaryContainer: AppColors.tertiaryDark,
surface: AppColors.surfaceLight,
onSurface: AppColors.textPrimaryLight,
surfaceContainerHighest: AppColors.surfaceVariantLight,
onSurfaceVariant: AppColors.textSecondaryLight,
error: AppColors.error,
onError: Colors.white,
);
final textTheme = _buildTextTheme(
ThemeData.light().textTheme,
AppColors.textPrimaryLight,
AppColors.textSecondaryLight,
);
return ThemeData(
useMaterial3: true,
colorScheme: colorScheme,
scaffoldBackgroundColor: AppColors.backgroundLight,
textTheme: textTheme,
// AppBar
appBarTheme: AppBarTheme(
elevation: 0,
scrolledUnderElevation: 1,
backgroundColor: AppColors.backgroundLight,
foregroundColor: AppColors.textPrimaryLight,
titleTextStyle: textTheme.titleLarge,
),
// Cards — subtle, soft shadows
cardTheme: CardThemeData(
elevation: 2,
shadowColor: Colors.black.withAlpha(25),
shape: _roundedShape,
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
),
// Elevated buttons — large touch targets
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
elevation: 2,
shadowColor: Colors.black.withAlpha(25),
),
),
// Filled buttons
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
),
),
// Outlined buttons
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
),
),
// Text buttons
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
minimumSize: const Size(48, 48),
textStyle: textTheme.labelLarge,
),
),
// Input decoration
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: AppColors.surfaceVariantLight,
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: const BorderSide(color: AppColors.primary, width: 2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: const BorderSide(color: AppColors.error, width: 1),
),
labelStyle: textTheme.bodyMedium,
hintStyle: textTheme.bodyMedium?.copyWith(color: AppColors.textSecondaryLight.withAlpha(150)),
),
// FABs
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: AppColors.primary,
foregroundColor: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
// Chips
chipTheme: ChipThemeData(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
),
// Bottom nav
bottomNavigationBarTheme: BottomNavigationBarThemeData(
elevation: 8,
selectedItemColor: AppColors.primary,
unselectedItemColor: AppColors.textSecondaryLight,
type: BottomNavigationBarType.fixed,
backgroundColor: AppColors.surfaceLight,
),
// Snackbar
snackBarTheme: SnackBarThemeData(
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
// Divider
dividerTheme: const DividerThemeData(
color: AppColors.dividerLight,
thickness: 1,
space: 1,
),
// Page transitions — gentle
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
},
),
);
}
// ── Dark theme — true dark with muted accents ────────────────────
static ThemeData get dark {
final colorScheme = ColorScheme.dark(
primary: AppColors.primaryLight,
onPrimary: AppColors.primaryDark,
primaryContainer: AppColors.primaryDark,
onPrimaryContainer: AppColors.primaryLight,
secondary: AppColors.secondary,
onSecondary: Colors.black,
secondaryContainer: AppColors.secondaryDark,
onSecondaryContainer: AppColors.secondaryLight,
tertiary: AppColors.tertiaryLight,
onTertiary: Colors.black,
tertiaryContainer: AppColors.tertiaryDark,
onTertiaryContainer: AppColors.tertiaryLight,
surface: AppColors.surfaceDark,
onSurface: AppColors.textPrimaryDark,
surfaceContainerHighest: AppColors.surfaceVariantDark,
onSurfaceVariant: AppColors.textSecondaryDark,
error: AppColors.errorLight,
onError: Colors.black,
);
final textTheme = _buildTextTheme(
ThemeData.dark().textTheme,
AppColors.textPrimaryDark,
AppColors.textSecondaryDark,
);
return ThemeData(
useMaterial3: true,
colorScheme: colorScheme,
scaffoldBackgroundColor: AppColors.backgroundDark,
textTheme: textTheme,
appBarTheme: AppBarTheme(
elevation: 0,
scrolledUnderElevation: 1,
backgroundColor: AppColors.backgroundDark,
foregroundColor: AppColors.textPrimaryDark,
titleTextStyle: textTheme.titleLarge,
),
cardTheme: CardThemeData(
elevation: 2,
shadowColor: Colors.black.withAlpha(60),
shape: _roundedShape,
color: AppColors.surfaceDark,
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
elevation: 2,
shadowColor: Colors.black.withAlpha(60),
),
),
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(_borderRadius)),
textStyle: textTheme.labelLarge,
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
minimumSize: const Size(48, 48),
textStyle: textTheme.labelLarge,
),
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: AppColors.surfaceVariantDark,
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: const BorderSide(color: AppColors.primaryLight, width: 2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_borderRadius),
borderSide: const BorderSide(color: AppColors.errorLight, width: 1),
),
labelStyle: textTheme.bodyMedium,
hintStyle: textTheme.bodyMedium?.copyWith(color: AppColors.textSecondaryDark.withAlpha(150)),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: AppColors.primaryLight,
foregroundColor: AppColors.primaryDark,
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
chipTheme: ChipThemeData(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
elevation: 8,
selectedItemColor: AppColors.primaryLight,
unselectedItemColor: AppColors.textSecondaryDark,
type: BottomNavigationBarType.fixed,
backgroundColor: AppColors.surfaceDark,
),
snackBarTheme: SnackBarThemeData(
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
dividerTheme: const DividerThemeData(
color: AppColors.dividerDark,
thickness: 1,
space: 1,
),
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
},
),
);
}
}

96
lib/core/widgets/gentle_nudge_card.dart Normal file
View File

@@ -0,0 +1,96 @@
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
/// Re-engagement card shown when the user returns after an absence.
///
/// Design rules:
/// - Warm, welcoming message — "Welcome back! Your tasks missed you."
/// - Show previous streak info gently.
/// - "Let's start small" CTA.
/// - NO guilt, NO "you missed X days" in red.
class GentleNudgeCard extends StatelessWidget {
final int? previousStreak;
final VoidCallback? onStartSmall;
final VoidCallback? onDismiss;
const GentleNudgeCard({
super.key,
this.previousStreak,
this.onStartSmall,
this.onDismiss,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: AppColors.primaryLight.withAlpha(40),
elevation: 0,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ── Header row ─────────────────────────────────────────
Row(
children: [
const Icon(Icons.waving_hand_rounded,
size: 28, color: AppColors.secondary),
const SizedBox(width: 10),
Expanded(
child: Text(
'Welcome back!',
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w700,
),
),
),
if (onDismiss != null)
IconButton(
icon: const Icon(Icons.close_rounded, size: 20),
onPressed: onDismiss,
style: IconButton.styleFrom(
minimumSize: const Size(36, 36),
),
),
],
),
const SizedBox(height: 10),
// ── Body ───────────────────────────────────────────────
Text(
'Your tasks missed you. No pressure — let\'s ease back in.',
style: theme.textTheme.bodyLarge,
),
if (previousStreak != null && previousStreak! > 0) ...[
const SizedBox(height: 8),
Text(
'You had a $previousStreak-day streak going. '
'That\'s still impressive — let\'s build on it.',
style: theme.textTheme.bodyMedium,
),
],
const SizedBox(height: 16),
// ── CTA ────────────────────────────────────────────────
FilledButton.icon(
onPressed: onStartSmall,
icon: const Icon(Icons.play_arrow_rounded),
label: const Text('Let\'s start small'),
style: FilledButton.styleFrom(
backgroundColor: AppColors.primary,
minimumSize: const Size(double.infinity, 52),
),
),
],
),
),
);
}
}

131
lib/core/widgets/reward_popup.dart Normal file
View File

@@ -0,0 +1,131 @@
import 'package:flutter/material.dart';
import 'package:focusflow_shared/focusflow_shared.dart';
import '../theme/app_colors.dart';
/// Reward celebration overlay.
///
/// Shows after a task is completed:
/// - Placeholder area for a Lottie animation.
/// - Points / magnitude display.
/// - Encouraging message.
/// - "Nice!" dismiss button.
/// - Surprise rewards get extra fanfare (larger, longer animation).
class RewardPopup extends StatelessWidget {
final Reward reward;
final VoidCallback onDismiss;
const RewardPopup({
super.key,
required this.reward,
required this.onDismiss,
});
/// Messages shown at random — always positive.
static const _messages = [
'You did it!',
'Awesome work!',
'One more down!',
'Keep that momentum!',
'Look at you go!',
'Your brain thanks you!',
'Small wins add up!',
'That felt good, right?',
];
String get _message {
if (reward.description != null && reward.description!.isNotEmpty) {
return reward.description!;
}
// Deterministic pick based on reward id hashCode so the same reward
// always shows the same message during a session.
return _messages[reward.id.hashCode.abs() % _messages.length];
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isSurprise = reward.isSurprise;
final size = isSurprise ? 140.0 : 100.0;
return Center(
child: Material(
color: Colors.transparent,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 32),
padding: const EdgeInsets.all(28),
decoration: BoxDecoration(
color: theme.colorScheme.surface,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(40),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ── Animation placeholder ────────────────────────────
Container(
width: size,
height: size,
decoration: BoxDecoration(
color: AppColors.rewardGold.withAlpha(40),
shape: BoxShape.circle,
),
child: Icon(
isSurprise ? Icons.auto_awesome : Icons.celebration_rounded,
size: size * 0.5,
color: AppColors.rewardGold,
),
),
const SizedBox(height: 20),
// ── Title ────────────────────────────────────────────
if (reward.title != null)
Text(
reward.title!,
style: theme.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
if (reward.title != null) const SizedBox(height: 8),
// ── Points ───────────────────────────────────────────
Text(
'+${reward.magnitude} pts',
style: theme.textTheme.titleLarge?.copyWith(
color: AppColors.rewardGoldDark,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 12),
// ── Message ──────────────────────────────────────────
Text(
_message,
style: theme.textTheme.bodyLarge,
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
// ── Dismiss ──────────────────────────────────────────
FilledButton(
onPressed: onDismiss,
style: FilledButton.styleFrom(
backgroundColor: AppColors.primary,
minimumSize: const Size(160, 52),
),
child: const Text('Nice!'),
),
],
),
),
),
);
}
}

179
lib/core/widgets/streak_ring.dart Normal file
View File

@@ -0,0 +1,179 @@
import 'dart:math' as math;
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
/// Circular streak progress indicator.
///
/// - Ring fills based on current count vs a goal.
/// - Grace days shown as dashed segments.
/// - Frozen indicator (snowflake icon).
/// - Center shows current count.
/// - Warm teal/green when active, gray when in grace period.
class StreakRing extends StatelessWidget {
/// Current streak count.
final int currentCount;
/// Number of grace days remaining (max grace days minus used).
final int graceDaysRemaining;
/// Total grace days allowed.
final int totalGraceDays;
/// Whether the streak is currently frozen.
final bool isFrozen;
/// Size of the widget (width & height).
final double size;
/// Optional label beneath the count.
final String? label;
const StreakRing({
super.key,
required this.currentCount,
this.graceDaysRemaining = 0,
this.totalGraceDays = 2,
this.isFrozen = false,
this.size = 100,
this.label,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return SizedBox(
width: size,
height: size,
child: CustomPaint(
painter: _StreakRingPainter(
progress: _progress,
graceProgress: _graceProgress,
isFrozen: isFrozen,
activeColor: AppColors.primary,
graceColor: AppColors.skipped,
frozenColor: AppColors.primaryLight,
backgroundColor: theme.dividerColor.withAlpha(50),
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (isFrozen)
Icon(Icons.ac_unit_rounded,
size: size * 0.22, color: AppColors.primaryLight)
else
Text(
'$currentCount',
style: theme.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w800,
fontSize: size * 0.26,
),
),
if (label != null)
Text(
label!,
style: theme.textTheme.bodySmall?.copyWith(fontSize: size * 0.1),
textAlign: TextAlign.center,
),
],
),
),
),
);
}
/// Normalised 0-1 progress for the main ring.
/// We cap visual progress at 1.0 but the count can exceed 30.
double get _progress => (currentCount / 30).clamp(0.0, 1.0);
/// Grace segment progress (shown as dashed portion after the main ring).
double get _graceProgress {
if (totalGraceDays == 0) return 0;
return ((totalGraceDays - graceDaysRemaining) / totalGraceDays).clamp(0.0, 1.0);
}
}
class _StreakRingPainter extends CustomPainter {
final double progress;
final double graceProgress;
final bool isFrozen;
final Color activeColor;
final Color graceColor;
final Color frozenColor;
final Color backgroundColor;
_StreakRingPainter({
required this.progress,
required this.graceProgress,
required this.isFrozen,
required this.activeColor,
required this.graceColor,
required this.frozenColor,
required this.backgroundColor,
});
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final radius = (size.shortestSide / 2) - 6;
const strokeWidth = 8.0;
const startAngle = -math.pi / 2;
// Background ring
canvas.drawCircle(
center,
radius,
Paint()
..color = backgroundColor
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round,
);
// Main progress arc
final sweepAngle = 2 * math.pi * progress;
if (progress > 0) {
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
startAngle,
sweepAngle,
false,
Paint()
..color = isFrozen ? frozenColor : activeColor
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round,
);
}
// Grace dashed segments (small arcs after the progress)
if (graceProgress > 0 && !isFrozen) {
const graceArcLength = math.pi / 8; // each dash length
final graceStart = startAngle + sweepAngle + 0.05;
final dashCount = (graceProgress * 3).ceil().clamp(0, 3);
for (int i = 0; i < dashCount; i++) {
final dashStart = graceStart + i * (graceArcLength + 0.06);
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
dashStart,
graceArcLength,
false,
Paint()
..color = graceColor
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth * 0.6
..strokeCap = StrokeCap.round,
);
}
}
}
@override
bool shouldRepaint(covariant _StreakRingPainter oldDelegate) =>
progress != oldDelegate.progress ||
graceProgress != oldDelegate.graceProgress ||
isFrozen != oldDelegate.isFrozen;
}

215
lib/core/widgets/task_card.dart Normal file
View File

@@ -0,0 +1,215 @@
import 'package:flutter/material.dart';
import 'package:focusflow_shared/focusflow_shared.dart';
import '../theme/app_colors.dart';
/// ADHD-friendly task card.
///
/// Design principles:
/// - Large title text for scannability.
/// - Energy level indicator (colored dot).
/// - Estimated time badge.
/// - Tags as small chips.
/// - Gentle color coding — NO overwhelming information density.
/// - Tap to open, long-press for quick actions.
class TaskCard extends StatelessWidget {
final Task task;
final VoidCallback? onTap;
final VoidCallback? onComplete;
final VoidCallback? onSkip;
const TaskCard({
super.key,
required this.task,
this.onTap,
this.onComplete,
this.onSkip,
});
Color _energyColor() {
switch (task.energyLevel) {
case 'low':
return AppColors.energyLow;
case 'high':
return AppColors.energyHigh;
default:
return AppColors.energyMedium;
}
}
String _energyLabel() {
switch (task.energyLevel) {
case 'low':
return 'Low';
case 'high':
return 'High';
default:
return 'Med';
}
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: onTap,
onLongPress: () => _showQuickActions(context),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ── Top row: title + energy dot ─────────────────────
Row(
children: [
// Energy dot
Container(
width: 12,
height: 12,
decoration: BoxDecoration(
color: _energyColor(),
shape: BoxShape.circle,
),
),
const SizedBox(width: 10),
// Title
Expanded(
child: Text(
task.title,
style: theme.textTheme.titleMedium?.copyWith(
fontSize: 18,
fontWeight: FontWeight.w600,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
],
),
if (task.description != null && task.description!.isNotEmpty) ...[
const SizedBox(height: 6),
Text(
task.description!,
style: theme.textTheme.bodyMedium,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
const SizedBox(height: 12),
// ── Bottom row: badges & tags ──────────────────────
Wrap(
spacing: 8,
runSpacing: 6,
children: [
// Energy badge
_Badge(
icon: Icons.bolt_rounded,
label: _energyLabel(),
color: _energyColor(),
),
// Estimated time
if (task.estimatedMinutes != null)
_Badge(
icon: Icons.timer_outlined,
label: '${task.estimatedMinutes} min',
color: AppColors.primary,
),
// Category
if (task.category != null)
_Badge(
icon: Icons.label_outline,
label: task.category!,
color: AppColors.tertiary,
),
// Tags
...task.tags.take(3).map((tag) => Chip(
label: Text(tag, style: const TextStyle(fontSize: 11)),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
)),
],
),
],
),
),
),
);
}
void _showQuickActions(BuildContext context) {
showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: const Icon(Icons.check_circle_outline, color: AppColors.completed),
title: const Text('Mark as done'),
onTap: () {
Navigator.pop(ctx);
onComplete?.call();
},
),
ListTile(
leading: const Icon(Icons.skip_next_outlined, color: AppColors.skipped),
title: const Text('Skip for now'),
onTap: () {
Navigator.pop(ctx);
onSkip?.call();
},
),
],
),
),
),
);
}
}
/// Small coloured badge used inside [TaskCard].
class _Badge extends StatelessWidget {
final IconData icon;
final String label;
final Color color;
const _Badge({required this.icon, required this.label, required this.color});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: color.withAlpha(30),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 14, color: color),
const SizedBox(width: 4),
Text(
label,
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: color),
),
],
),
);
}
}

125
lib/core/widgets/time_visualizer.dart Normal file
View File

@@ -0,0 +1,125 @@
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
/// Visual time block widget showing estimated vs actual duration.
///
/// - Horizontal bar: green (under estimate) -> yellow (near) -> soft orange (over).
/// - NO red — going over is shown gently, not punitively.
class TimeVisualizer extends StatelessWidget {
/// Estimated duration in minutes.
final int estimatedMinutes;
/// Actual duration in minutes (null if not yet completed).
final int? actualMinutes;
/// Optional height for the bars.
final double barHeight;
const TimeVisualizer({
super.key,
required this.estimatedMinutes,
this.actualMinutes,
this.barHeight = 12,
});
/// Returns a color based on actual / estimated ratio.
/// <= 0.8 -> green (under)
/// 0.8-1.1 -> teal (on time)
/// 1.1-1.5 -> yellow (slightly over)
/// > 1.5 -> soft orange (over, but gentle)
Color _barColor(double ratio) {
if (ratio <= 0.8) return AppColors.completed;
if (ratio <= 1.1) return AppColors.primary;
if (ratio <= 1.5) return AppColors.energyMedium;
return AppColors.energyHigh; // soft orange, NOT red
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final actual = actualMinutes;
final hasActual = actual != null && actual > 0;
// If no actual yet, show just the estimate bar.
final ratio = hasActual ? actual / estimatedMinutes : 0.0;
final estimateWidth = 1.0; // always full width = estimate
final actualWidth = hasActual ? ratio.clamp(0.0, 2.0) / 2.0 : 0.0;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Labels
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Estimated: $estimatedMinutes min',
style: theme.textTheme.bodySmall,
),
if (hasActual)
Text(
'Actual: $actual min',
style: theme.textTheme.bodySmall?.copyWith(
fontWeight: FontWeight.w600,
color: _barColor(ratio),
),
),
],
),
const SizedBox(height: 6),
// ── Estimate bar (background / reference) ──────────────────
ClipRRect(
borderRadius: BorderRadius.circular(barHeight / 2),
child: Stack(
children: [
// Full estimate background
Container(
height: barHeight,
width: double.infinity,
decoration: BoxDecoration(
color: AppColors.primary.withAlpha(30),
borderRadius: BorderRadius.circular(barHeight / 2),
),
),
// Actual fill
if (hasActual)
FractionallySizedBox(
widthFactor: actualWidth.clamp(0.0, estimateWidth),
child: Container(
height: barHeight,
decoration: BoxDecoration(
color: _barColor(ratio),
borderRadius: BorderRadius.circular(barHeight / 2),
),
),
),
],
),
),
// ── Gentle insight ─────────────────────────────────────────
if (hasActual) ...[
const SizedBox(height: 4),
Text(
_insightText(ratio),
style: theme.textTheme.bodySmall?.copyWith(
color: _barColor(ratio),
fontWeight: FontWeight.w500,
),
),
],
],
);
}
String _insightText(double ratio) {
if (ratio <= 0.8) return 'Finished early — nice!';
if (ratio <= 1.1) return 'Right on target.';
if (ratio <= 1.5) return 'A little over — totally fine.';
return 'Took longer than expected. That happens!';
}
}