added navigation to detail page

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'pages/todo_create_page.dart';
 import 'pages/dashboard_page.dart';
+import 'pages/todo_detail_page.dart';
 import 'services/dbhelper.dart';
 
 void main() async {
@@ -25,6 +26,7 @@ class MyApp extends StatelessWidget {
       routes: {
         DashboardPage.routeName: (context) => const DashboardPage(),
         CreateTodoPage.routeName: (context) => const CreateTodoPage(),
+        TodoDetailPage.routeName: (context) => const TodoDetailPage(),
       },
     );
   }

lib/pages/todo_detail_page.dart

@@ -1,11 +1,39 @@
 import 'package:flutter/material.dart';
 
+import '../models/todo.dart';
+import '../services/todo_provider.dart';
+
 class TodoDetailPage extends StatelessWidget {
   const TodoDetailPage({super.key});
+
   static const routeName = '/detail';
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    final Todo? todo = TodoProvider.selectedTodo;
+    if (todo == null) {
+      Navigator.of(context).pop();
+    }
+
+    final screenWidth = MediaQuery.of(context).size.width;
+    todo as Todo;
+
+    return Scaffold(
+      appBar: AppBar(),
+      body: Padding(
+        padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.05),
+        child: Column(
+          children: [
+            Text(
+              todo.title,
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            Text(
+              todo.description,
+            ),
+          ],
+        ),
+      ),
+    );
   }
 }

lib/services/todo_provider.dart

@@ -0,0 +1,5 @@
+import '../models/todo.dart';
+
+class TodoProvider {
+  static Todo? selectedTodo;
+}

lib/widgets/todo_listtile.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 
 import '../models/todo.dart';
+import '../pages/todo_detail_page.dart';
+import '../services/todo_provider.dart';
 
 class TodoListTile extends StatelessWidget {
   const TodoListTile({super.key, required this.todo, required this.onPressed});
@@ -20,6 +22,7 @@ class TodoListTile extends StatelessWidget {
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       tileColor: Theme.of(context).colorScheme.primaryContainer,
       title: Text(todo.title),
+      onTap: () => _onListTileTapped(context),
       trailing: IconButton(
         onPressed: onPressed,
         icon: Icon(
@@ -35,6 +38,7 @@ class TodoListTile extends StatelessWidget {
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       tileColor: Theme.of(context).colorScheme.surfaceVariant,
       title: Text(todo.title),
+      onTap: () => _onListTileTapped(context),
       trailing: IconButton(
         onPressed: onPressed,
         icon: Icon(
@@ -44,4 +48,9 @@ class TodoListTile extends StatelessWidget {
       ),
     );
   }
+
+  void _onListTileTapped(BuildContext context) {
+    TodoProvider.selectedTodo = todo;
+    Navigator.of(context).pushNamed(TodoDetailPage.routeName);
+  }
 }