demo
This commit is contained in:
79
lib/features/home/models.dart
Normal file
79
lib/features/home/models.dart
Normal file
@@ -0,0 +1,79 @@
|
||||
|
||||
|
||||
class LessonResponse {
|
||||
final String image; // base64 string
|
||||
final String response;
|
||||
final WidgetData widget;
|
||||
|
||||
LessonResponse({
|
||||
required this.image,
|
||||
required this.response,
|
||||
required this.widget,
|
||||
});
|
||||
|
||||
factory LessonResponse.fromJson(Map<String, dynamic> json) {
|
||||
return LessonResponse(
|
||||
image: json['image'] as String,
|
||||
response: json['response'] as String,
|
||||
widget: WidgetData.fromJson(json['widget']),
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
return {
|
||||
'image': image,
|
||||
'response': response,
|
||||
'widget': widget.toJson(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class WidgetData {
|
||||
final TapWidget tapToRecordWidget;
|
||||
final TapWidget tapToSpeechWidget;
|
||||
|
||||
WidgetData({
|
||||
required this.tapToRecordWidget,
|
||||
required this.tapToSpeechWidget,
|
||||
});
|
||||
|
||||
factory WidgetData.fromJson(Map<String, dynamic> json) {
|
||||
return WidgetData(
|
||||
tapToRecordWidget:
|
||||
TapWidget.fromJson(json['tap_to_record_widget']),
|
||||
tapToSpeechWidget:
|
||||
TapWidget.fromJson(json['tap_to_speech_widget']),
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
return {
|
||||
'tap_to_record_widget': tapToRecordWidget.toJson(),
|
||||
'tap_to_speech_widget': tapToSpeechWidget.toJson(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class TapWidget {
|
||||
final String content;
|
||||
final String position;
|
||||
|
||||
TapWidget({
|
||||
required this.content,
|
||||
required this.position,
|
||||
});
|
||||
|
||||
factory TapWidget.fromJson(Map<String, dynamic> json) {
|
||||
return TapWidget(
|
||||
content: json['content'] as String,
|
||||
position: json['position'] as String,
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
return {
|
||||
'content': content,
|
||||
'position': position,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
@@ -6,506 +8,505 @@ import '../../../../core/routing/route_guards.dart';
|
||||
import '../../../../shared/presentation/providers/app_providers.dart';
|
||||
|
||||
/// Home page with navigation to different features
|
||||
class HomePage extends ConsumerWidget {
|
||||
const HomePage({super.key});
|
||||
class LevelMapScreen extends StatefulWidget {
|
||||
const LevelMapScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final authState = ref.watch(authStateProvider);
|
||||
final themeMode = ref.watch(themeModeProvider);
|
||||
State<LevelMapScreen> createState() => _LevelMapScreenState();
|
||||
}
|
||||
|
||||
class _LevelMapScreenState extends State<LevelMapScreen> {
|
||||
final ScrollController _scroll = ScrollController();
|
||||
|
||||
// ---- Dynamic level data (change these) ----
|
||||
final int totalLevels = 60; // total levels you want to show
|
||||
final int currentLevelIndex = 4; // 0-based index of current level
|
||||
|
||||
// ---- Layout knobs (tweak to taste) ----
|
||||
static const double kNodeSpacing = 220; // px along the path between bubbles
|
||||
static const double kStartOffset = 140; // first bubble offset from path start
|
||||
static const double kVerticalStep = 270; // vertical descent per circle loop
|
||||
|
||||
// The scrollable map height is finite and derived from how many levels we show.
|
||||
double get mapHeight {
|
||||
return _calculateRequiredHeight(
|
||||
totalLevels: totalLevels,
|
||||
nodeSpacing: kNodeSpacing,
|
||||
startOffset: kStartOffset,
|
||||
);
|
||||
}
|
||||
|
||||
/// Calculate the actual vertical height needed for circular path
|
||||
double _calculateRequiredHeight({
|
||||
required int totalLevels,
|
||||
required double nodeSpacing,
|
||||
required double startOffset,
|
||||
}) {
|
||||
// Path parameters (must match _buildCircularPath)
|
||||
const double baseRadius = 0.32; // percentage of width
|
||||
const double topPadding = 100.0;
|
||||
const double bottomPadding = 100.0;
|
||||
|
||||
// Estimate circle circumference (approximation for cubic bezier circle)
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final radiusInPixels = screenWidth * baseRadius;
|
||||
final approximateCircleLength = 2 * math.pi * radiusInPixels;
|
||||
|
||||
// Total path length needed for all nodes
|
||||
final totalPathLength = startOffset + (totalLevels - 1) * nodeSpacing;
|
||||
|
||||
// Calculate how many circles we need
|
||||
final numberOfCircles = (totalPathLength / approximateCircleLength).ceil();
|
||||
|
||||
// Calculate actual vertical height
|
||||
final contentHeight = numberOfCircles * kVerticalStep;
|
||||
final totalHeight = topPadding + contentHeight + bottomPadding;
|
||||
|
||||
return math.max(1200, totalHeight);
|
||||
}
|
||||
|
||||
double? _currentLevelY; // used to auto-scroll near the current level
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Auto-scroll after first layout
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
final y = _currentLevelY ?? 0;
|
||||
final screenH = MediaQuery.of(context).size.height;
|
||||
final target = (y - screenH * 0.45).clamp(0.0, mapHeight);
|
||||
_scroll.animateTo(
|
||||
target,
|
||||
duration: const Duration(milliseconds: 600),
|
||||
curve: Curves.easeOutCubic,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scroll.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Base Flutter App'),
|
||||
actions: [
|
||||
// Theme toggle button
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref.read(themeModeProvider.notifier).toggleTheme();
|
||||
backgroundColor: const Color(0xFFFFB43E), // warm island background
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildHeader(),
|
||||
Expanded(
|
||||
child: LayoutBuilder(
|
||||
builder: (ctx, c) {
|
||||
return SingleChildScrollView(
|
||||
controller: _scroll,
|
||||
child: SizedBox(
|
||||
height: mapHeight, // <-- finite height
|
||||
width: c.maxWidth,
|
||||
child: LevelMap(
|
||||
totalLevels: totalLevels,
|
||||
currentIndex: currentLevelIndex,
|
||||
nodeSpacing: kNodeSpacing,
|
||||
startOffsetOnPath: kStartOffset,
|
||||
verticalStep: kVerticalStep,
|
||||
showFinishAtEnd: true,
|
||||
onCurrentLevelPositionResolved: (dy) {
|
||||
_currentLevelY = dy;
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
_buildBottomNav(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader() => Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 8, 8, 12),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_back)),
|
||||
const Expanded(
|
||||
child: Text(
|
||||
'Kho báu đảo hoang',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
IconButton(onPressed: () {}, icon: const Icon(Icons.refresh)),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
Widget _buildBottomNav() => Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.08),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, -2),
|
||||
)
|
||||
],
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: const [
|
||||
_Nav(icon: Icons.home, label: 'Trang chủ'),
|
||||
_Nav(icon: Icons.location_on, label: 'Khám phá', active: true),
|
||||
_Nav(icon: Icons.bar_chart, label: 'Xếp hạng'),
|
||||
_Nav(icon: Icons.people, label: 'Kết nối'),
|
||||
_Nav(icon: Icons.person, label: 'Cá nhân'),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _Nav extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final bool active;
|
||||
const _Nav({required this.icon, required this.label, this.active = false, super.key});
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: active ? Colors.orange : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(icon, color: active ? Colors.white : Colors.grey)),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: active ? Colors.orange : Colors.grey,
|
||||
fontWeight: active ? FontWeight.bold : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/// Draws the path and positions dynamic level nodes **along the path**.
|
||||
class LevelMap extends StatelessWidget {
|
||||
final int totalLevels;
|
||||
final int currentIndex;
|
||||
final double nodeSpacing;
|
||||
final double startOffsetOnPath;
|
||||
final double verticalStep;
|
||||
final bool showFinishAtEnd;
|
||||
final ValueChanged<double>? onCurrentLevelPositionResolved;
|
||||
|
||||
const LevelMap({
|
||||
super.key,
|
||||
required this.totalLevels,
|
||||
required this.currentIndex,
|
||||
required this.nodeSpacing,
|
||||
required this.startOffsetOnPath,
|
||||
required this.verticalStep,
|
||||
this.showFinishAtEnd = false,
|
||||
this.onCurrentLevelPositionResolved,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(builder: (ctx, c) {
|
||||
final size = Size(c.maxWidth, c.maxHeight);
|
||||
|
||||
// Build a circular/spiral path that fills this finite canvas.
|
||||
final path = _buildCircularPath(size, verticalStep);
|
||||
|
||||
// Measure the path
|
||||
final metrics = path.computeMetrics().toList();
|
||||
if (metrics.isEmpty) return const SizedBox.shrink();
|
||||
final metric = metrics.first; // single contour
|
||||
final totalLen = metric.length;
|
||||
|
||||
// Required length to host all visible levels
|
||||
final requiredLen =
|
||||
startOffsetOnPath + (math.max(1, totalLevels) - 1) * nodeSpacing;
|
||||
|
||||
// Clamp to available path length
|
||||
final effectiveLen = requiredLen.clamp(0, totalLen - 1);
|
||||
|
||||
// Compute bubble positions
|
||||
final nodes = <Widget>[];
|
||||
const bubbleRadius = 28.0; // 56x56
|
||||
const eps = 0.001;
|
||||
|
||||
double d = startOffsetOnPath;
|
||||
Offset? lastNodePosition; // Track last node position for finish flag
|
||||
|
||||
for (int i = 0; i < totalLevels; i++) {
|
||||
final clamped = d.clamp(0, totalLen - eps);
|
||||
final tan = metric.getTangentForOffset(clamped.toDouble())!;
|
||||
final pos = tan.position;
|
||||
|
||||
// Store last node position
|
||||
if (i == totalLevels - 1) {
|
||||
lastNodePosition = pos;
|
||||
}
|
||||
|
||||
nodes.add(Positioned(
|
||||
left: pos.dx - bubbleRadius,
|
||||
top: pos.dy - bubbleRadius,
|
||||
child: LevelNode(
|
||||
level: i + 1,
|
||||
isCompleted: i < currentIndex,
|
||||
isCurrent: i == currentIndex,
|
||||
isLocked: i > currentIndex,
|
||||
onTap: i > currentIndex ? null : () {
|
||||
debugPrint('Level ${i + 1} tapped');
|
||||
context.pushNamed('lesson');
|
||||
},
|
||||
icon: Icon(
|
||||
themeMode == ThemeMode.dark
|
||||
? Icons.light_mode
|
||||
: themeMode == ThemeMode.light
|
||||
? Icons.dark_mode
|
||||
: Icons.brightness_auto,
|
||||
),
|
||||
tooltip: 'Toggle theme',
|
||||
),
|
||||
// Settings button
|
||||
IconButton(
|
||||
onPressed: () => context.push(RoutePaths.settings),
|
||||
icon: const Icon(Icons.settings),
|
||||
tooltip: 'Settings',
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Welcome section
|
||||
_WelcomeCard(authState: authState),
|
||||
));
|
||||
|
||||
const SizedBox(height: 24),
|
||||
d += nodeSpacing;
|
||||
if (d > totalLen - eps) break; // stop when path ends
|
||||
}
|
||||
|
||||
// Quick actions section
|
||||
Text(
|
||||
'Quick Actions',
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
// Report current Y for auto-scroll
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (onCurrentLevelPositionResolved != null &&
|
||||
currentIndex >= 0 &&
|
||||
currentIndex < nodes.length) {
|
||||
final clamped = (startOffsetOnPath + currentIndex * nodeSpacing)
|
||||
.clamp(0, totalLen - eps);
|
||||
final tan = metric.getTangentForOffset(clamped.toDouble())!;
|
||||
onCurrentLevelPositionResolved!(tan.position.dy);
|
||||
}
|
||||
});
|
||||
|
||||
_QuickActionsGrid(),
|
||||
// Optional finish flag at last level position
|
||||
if (showFinishAtEnd && lastNodePosition != null) {
|
||||
nodes.add(Positioned(
|
||||
left: lastNodePosition.dx - 18,
|
||||
top: lastNodePosition.dy - 60,
|
||||
child: const Icon(Icons.flag, color: Colors.red, size: 36),
|
||||
));
|
||||
}
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Features section
|
||||
Text(
|
||||
'Features',
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
_FeaturesGrid(),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Recent activity section
|
||||
_RecentActivityCard(),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton.extended(
|
||||
onPressed: () => context.push(RoutePaths.addTodo),
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add Todo'),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WelcomeCard extends StatelessWidget {
|
||||
final AuthState authState;
|
||||
|
||||
const _WelcomeCard({
|
||||
required this.authState,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 24,
|
||||
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
|
||||
child: Icon(
|
||||
Icons.person,
|
||||
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
authState == AuthState.authenticated
|
||||
? 'Welcome back!'
|
||||
: 'Welcome!',
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
authState == AuthState.authenticated
|
||||
? 'Ready to be productive today?'
|
||||
: 'Get started with the base Flutter app.',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.7),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (authState == AuthState.unauthenticated) ...[
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: OutlinedButton(
|
||||
onPressed: () => context.push(RoutePaths.login),
|
||||
child: const Text('Login'),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: FilledButton(
|
||||
onPressed: () => context.push(RoutePaths.register),
|
||||
child: const Text('Register'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _QuickActionsGrid extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final quickActions = [
|
||||
_QuickAction(
|
||||
icon: Icons.add_task,
|
||||
title: 'Add Todo',
|
||||
subtitle: 'Create a new task',
|
||||
onTap: () => context.push(RoutePaths.addTodo),
|
||||
),
|
||||
_QuickAction(
|
||||
icon: Icons.list,
|
||||
title: 'View Todos',
|
||||
subtitle: 'See all tasks',
|
||||
onTap: () => context.push(RoutePaths.todos),
|
||||
),
|
||||
_QuickAction(
|
||||
icon: Icons.settings,
|
||||
title: 'Settings',
|
||||
subtitle: 'App preferences',
|
||||
onTap: () => context.push(RoutePaths.settings),
|
||||
),
|
||||
_QuickAction(
|
||||
icon: Icons.info,
|
||||
title: 'About',
|
||||
subtitle: 'App information',
|
||||
onTap: () => context.push(RoutePaths.about),
|
||||
),
|
||||
];
|
||||
|
||||
return GridView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 12,
|
||||
mainAxisSpacing: 12,
|
||||
childAspectRatio: 1.2,
|
||||
),
|
||||
itemCount: quickActions.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _QuickActionCard(action: quickActions[index]);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FeaturesGrid extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final features = [
|
||||
_Feature(
|
||||
icon: Icons.check_circle_outline,
|
||||
title: 'Todo Management',
|
||||
description: 'Create, edit, and track your tasks efficiently.',
|
||||
color: Colors.blue,
|
||||
onTap: () => context.push(RoutePaths.todos),
|
||||
),
|
||||
_Feature(
|
||||
icon: Icons.palette,
|
||||
title: 'Theming',
|
||||
description: 'Switch between light, dark, and system themes.',
|
||||
color: Colors.purple,
|
||||
onTap: () => context.push(RoutePaths.settingsTheme),
|
||||
),
|
||||
_Feature(
|
||||
icon: Icons.storage,
|
||||
title: 'Local Storage',
|
||||
description: 'Hive database integration for offline support.',
|
||||
color: Colors.orange,
|
||||
onTap: () => context.push(RoutePaths.settings),
|
||||
),
|
||||
_Feature(
|
||||
icon: Icons.security,
|
||||
title: 'Secure Storage',
|
||||
description: 'Protected storage for sensitive data.',
|
||||
color: Colors.green,
|
||||
onTap: () => context.push(RoutePaths.settingsPrivacy),
|
||||
),
|
||||
];
|
||||
|
||||
return GridView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 12,
|
||||
mainAxisSpacing: 12,
|
||||
childAspectRatio: 0.8,
|
||||
),
|
||||
itemCount: features.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _FeatureCard(feature: features[index]);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RecentActivityCard extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Recent Activity',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => context.push(RoutePaths.todos),
|
||||
child: const Text('View All'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_ActivityItem(
|
||||
icon: Icons.add_task,
|
||||
title: 'Welcome to Base Flutter App',
|
||||
subtitle: 'Your journey starts here',
|
||||
time: 'Just now',
|
||||
),
|
||||
_ActivityItem(
|
||||
icon: Icons.info,
|
||||
title: 'App initialized',
|
||||
subtitle: 'Database and services ready',
|
||||
time: 'A few seconds ago',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _QuickActionCard extends StatelessWidget {
|
||||
final _QuickAction action;
|
||||
|
||||
const _QuickActionCard({
|
||||
required this.action,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: InkWell(
|
||||
onTap: action.onTap,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
action.icon,
|
||||
size: 32,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
action.title,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
action.subtitle,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FeatureCard extends StatelessWidget {
|
||||
final _Feature feature;
|
||||
|
||||
const _FeatureCard({
|
||||
required this.feature,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: InkWell(
|
||||
onTap: feature.onTap,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: feature.color.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
feature.icon,
|
||||
color: feature.color,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
feature.title,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
feature.description,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
||||
),
|
||||
maxLines: 3,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActivityItem extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String subtitle;
|
||||
final String time;
|
||||
|
||||
const _ActivityItem({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
required this.time,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
||||
child: Row(
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
size: 16,
|
||||
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
subtitle,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Text(
|
||||
time,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
// Cute background bits (optional)
|
||||
Positioned.fill(child: CustomPaint(painter: DecorationPainter())),
|
||||
// Sandy road
|
||||
Positioned.fill(child: CustomPaint(painter: SandPathPainter(path))),
|
||||
// Bubbles
|
||||
...nodes,
|
||||
],
|
||||
),
|
||||
);
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/// Creates a circular/spiral path that goes in circles while progressing downward
|
||||
Path _buildCircularPath(Size size, double verticalStep) {
|
||||
final path = Path();
|
||||
|
||||
final centerX = size.width * 0.5;
|
||||
final baseRadius = size.width * 0.32; // radius of the circular motion
|
||||
|
||||
double y = 100;
|
||||
|
||||
// Start at top center
|
||||
path.moveTo(centerX, y);
|
||||
|
||||
// Create circular loops going downward
|
||||
while (y < size.height - 100) {
|
||||
// Create a full circle using cubic bezier curves (4 curves make a circle)
|
||||
final startY = y;
|
||||
|
||||
// Right curve (0° to 90°)
|
||||
path.cubicTo(
|
||||
centerX + baseRadius * 0.55, startY,
|
||||
centerX + baseRadius, startY + verticalStep * 0.25 - baseRadius * 0.55,
|
||||
centerX + baseRadius, startY + verticalStep * 0.25,
|
||||
);
|
||||
|
||||
// Bottom curve (90° to 180°)
|
||||
path.cubicTo(
|
||||
centerX + baseRadius, startY + verticalStep * 0.25 + baseRadius * 0.55,
|
||||
centerX + baseRadius * 0.55, startY + verticalStep * 0.5,
|
||||
centerX, startY + verticalStep * 0.5,
|
||||
);
|
||||
|
||||
// Left curve (180° to 270°)
|
||||
path.cubicTo(
|
||||
centerX - baseRadius * 0.55, startY + verticalStep * 0.5,
|
||||
centerX - baseRadius, startY + verticalStep * 0.75 - baseRadius * 0.55,
|
||||
centerX - baseRadius, startY + verticalStep * 0.75,
|
||||
);
|
||||
|
||||
// Top curve (270° to 360°)
|
||||
path.cubicTo(
|
||||
centerX - baseRadius, startY + verticalStep * 0.75 + baseRadius * 0.55,
|
||||
centerX - baseRadius * 0.55, startY + verticalStep,
|
||||
centerX, startY + verticalStep,
|
||||
);
|
||||
|
||||
y += verticalStep;
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
class _QuickAction {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String subtitle;
|
||||
final VoidCallback onTap;
|
||||
/// Painter for the sand road with subtle depth.
|
||||
class SandPathPainter extends CustomPainter {
|
||||
final Path path;
|
||||
SandPathPainter(this.path);
|
||||
|
||||
const _QuickAction({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
required this.onTap,
|
||||
});
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
// Glow/soft highlight
|
||||
final glow = Paint()
|
||||
..color = const Color(0x26FFFFFF)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 84
|
||||
..strokeCap = StrokeCap.round
|
||||
..maskFilter = const MaskFilter.blur(BlurStyle.normal, 10);
|
||||
canvas.drawPath(path, glow);
|
||||
|
||||
// Main sand
|
||||
final sand = Paint()
|
||||
..color = const Color(0xFFFFD18C)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 64
|
||||
..strokeCap = StrokeCap.round
|
||||
..strokeJoin = StrokeJoin.round;
|
||||
canvas.drawPath(path, sand);
|
||||
|
||||
// Inner shade for depth
|
||||
final inner = Paint()
|
||||
..color = const Color(0xFFEAB66F)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 36
|
||||
..strokeCap = StrokeCap.round;
|
||||
canvas.drawPath(path, inner);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant SandPathPainter oldDelegate) =>
|
||||
oldDelegate.path != path;
|
||||
}
|
||||
|
||||
class _Feature {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String description;
|
||||
final Color color;
|
||||
final VoidCallback onTap;
|
||||
/// Simple decorative painter (palms/hills placeholders).
|
||||
class DecorationPainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final palm = Paint()..color = const Color(0xFF66A060);
|
||||
final hill = Paint()..color = const Color(0xFFFFE1A8).withOpacity(.35);
|
||||
|
||||
const _Feature({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.description,
|
||||
required this.color,
|
||||
required this.onTap,
|
||||
for (double y = 160; y < size.height; y += 260) {
|
||||
canvas.drawCircle(Offset(size.width * 0.18, y), 10, palm);
|
||||
canvas.drawCircle(Offset(size.width * 0.82, y + 70), 10, palm);
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(
|
||||
Rect.fromCenter(
|
||||
center: Offset(size.width * 0.5, y + 120),
|
||||
width: 140,
|
||||
height: 60,
|
||||
),
|
||||
const Radius.circular(30),
|
||||
),
|
||||
hill,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
||||
}
|
||||
|
||||
class LevelNode extends StatelessWidget {
|
||||
final int level;
|
||||
final bool isCompleted;
|
||||
final bool isCurrent;
|
||||
final bool isLocked;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const LevelNode({
|
||||
super.key,
|
||||
required this.level,
|
||||
required this.isCompleted,
|
||||
required this.isCurrent,
|
||||
required this.isLocked,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: isLocked ? null : onTap,
|
||||
child: Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white,
|
||||
border: Border.all(
|
||||
color: isCurrent ? Colors.orange : Colors.white,
|
||||
width: 4,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.18),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Center(child: _inner()),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _inner() {
|
||||
if (isCompleted) {
|
||||
return const Icon(Icons.check_circle, color: Colors.green, size: 28);
|
||||
}
|
||||
if (isLocked) {
|
||||
return const Icon(Icons.lock, color: Colors.grey, size: 22);
|
||||
}
|
||||
if (isCurrent) {
|
||||
return Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(
|
||||
colors: [Colors.orange.shade300, Colors.orange.shade700],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
),
|
||||
child: const Icon(Icons.play_arrow, color: Colors.white),
|
||||
);
|
||||
}
|
||||
return Text(
|
||||
'$level',
|
||||
style: const TextStyle(
|
||||
fontSize: 18, fontWeight: FontWeight.bold, color: Colors.orange),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user