Customized version

lib/constants/Colours.dart

@@ -0,0 +1,5 @@
+import 'package:flutter/material.dart';
+
+Color tdBgColor = const Color(0xFF4e6190);
+Color tdAbColor = const Color(0xff124c81);
+Color whiteColor = Colors.white;

lib/constants/Textstyle.dart

@@ -0,0 +1,10 @@
+import "package:flutter/material.dart";
+import "package:todolist/constants/Colours.dart";
+
+TextStyle titleFont =
+    TextStyle(fontSize: 25, color: Colors.white, fontWeight: FontWeight.bold);
+
+TextStyle drawerFont =
+    TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: Colors.white);
+
+TextStyle bodyFoont = TextStyle(fontSize: 14, color: tdAbColor);

lib/main.dart

@@ -1,22 +1,25 @@
 import 'package:flutter/material.dart';
-import 'package:todolist/screens/tasks_screen.dart';// importing the task_screen.dart
+import 'package:todolist/screens/tasks_screen.dart'; // importing the task_screen.dart
 
 void main() {
   runApp(const MyApp());
 }
+
 class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      debugShowCheckedModeBanner: false,  // Hide debug banner
-      title: 'Flutter Demo',  // Set app title
-      theme: ThemeData(  // Configure app theme
-        colorScheme: ColorScheme.fromSwatch().copyWith(primary: const Color(0xFF883007)),  // Set primary color
-        useMaterial3: true,  // Enable Material 3 design elements
+      debugShowCheckedModeBanner: false, // Hide debug banner
+      title: 'Flutter Demo', // Set app title
+      theme: ThemeData(
+        // Configure app theme
+        colorScheme: ColorScheme.fromSwatch()
+            .copyWith(primary: const Color(0xFF4e6190)), // Set primary color
+        useMaterial3: true, // Enable Material 3 design elements
       ),
-      home: TasksScreen(),  // Set home screen to be  TasksScreen
+      home: TasksScreen(), // Set home screen to be  TasksScreen
     );
   }
 }

lib/model/NavigationDrawer.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:todolist/constants/Colours.dart';
+import 'package:todolist/constants/Textstyle.dart';
+
+class NavDrawer extends StatelessWidget {
+  const NavDrawer({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      backgroundColor: tdAbColor,
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          UserAccountsDrawerHeader(
+            accountName: Text("Gucha Duncan"),
+            accountEmail: Text("gucha_duncan@outlook.com"),
+            currentAccountPicture: CircleAvatar(
+              child: ClipOval(
+                child: Image.asset("assets/profile.png"),
+              ),
+            ),
+            decoration: BoxDecoration(
+                image: DecorationImage(
+              image: AssetImage('assets/bg1.jpg'),
+              fit: BoxFit.cover,
+            )),
+          ),
+          ListTile(
+            leading: Icon(Icons.home, color: whiteColor),
+            title: Text("Home", style: drawerFont),
+            onTap: () {
+              print("Home Clicked");
+            },
+          ),
+          ListTile(
+            leading: Icon(Icons.done, color: whiteColor),
+            title: Text("Completed Task", style: drawerFont),
+            onTap: () {
+              print("Completed Clicked");
+            },
+          ),
+          ListTile(
+            leading: Icon(Icons.pending, color: whiteColor),
+            title: Text("Pending Task", style: drawerFont),
+            onTap: () {
+              print("Pending Clicked");
+            },
+          ),
+          ListTile(
+            leading: Icon(Icons.call, color: whiteColor),
+            title: Text("Report Problem", style: drawerFont),
+            onTap: () {
+              print("Call Clicked");
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/model/todo.dart

@@ -2,7 +2,8 @@
 class ToDo {
   String id; // Unique identifier for the todo item
   String todoText; // Text content of the todo item
-  bool isDone; // Completion status of the todo item (true if completed, false otherwise)
+  bool
+      isDone; // Completion status of the todo item (true if completed, false otherwise)
 
   // Constructor for the ToDo class, with required parameters for id and todoText,
   // and an optional parameter for isDone with a default value of false.
@@ -17,12 +18,17 @@ class ToDo {
   static List<ToDo> todoList() {
     // Return a list of ToDo items with predefined properties.
     return [
-      ToDo(id: '1', todoText: 'Buy groceries', isDone: true), // A completed task
-      ToDo(id: '2', todoText: 'Go shopping', isDone: true), // A completed task
-      ToDo(id: '3', todoText: 'Call lecturer', isDone: true), // A completed task
-      ToDo(id: '4', todoText: 'Call classmate'), // An incomplete task
-      ToDo(id: '5', todoText: 'Call brother'), // An incomplete task
-      ToDo(id: '6', todoText: 'Call sister'), // An incomplete task
+      ToDo(
+          id: '1',
+          todoText: 'Complete PLP Hackathon',
+          isDone: true), // A completed task
+      ToDo(id: '2', todoText: 'Read Books', isDone: true), // A completed task
+      ToDo(
+          id: '3',
+          todoText: 'Check My Emails',
+          isDone: true), // A completed task
+      ToDo(id: '4', todoText: 'Watch Football'), // An incomplete task
+      ToDo(id: '5', todoText: ' Go for groceries'), // An incomplete task
     ];
   }
 }

lib/screens/tasks_screen.dart

@@ -1,6 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:todolist/constants/Colours.dart';
+import 'package:todolist/constants/Textstyle.dart';
+
+import 'package:todolist/model/NavigationDrawer.dart';
+
 import 'package:todolist/model/todo.dart'; // Import ToDo model class
 import 'package:todolist/widgets/todo_items.dart'; // Import ToDoItem widget
+
 // Enumeration to represent different task categories
 enum TaskCategory {
   all,
@@ -18,7 +24,8 @@ class TasksScreen extends StatefulWidget {
 class _TasksScreenState extends State<TasksScreen> {
   List<ToDo> todosList = ToDo.todoList(); // List of all tasks
   List<ToDo> _foundToDo = []; // List of tasks to display based on category
-  TaskCategory _selectedCategory = TaskCategory.all; // Default selected category
+  TaskCategory _selectedCategory =
+      TaskCategory.all; // Default selected category
 
   @override
   void initState() {
@@ -34,10 +41,14 @@ class _TasksScreenState extends State<TasksScreen> {
           _foundToDo = todosList; // Display all tasks
           break;
         case TaskCategory.completed:
-          _foundToDo = todosList.where((todo) => todo.isDone).toList(); // Display completed tasks
+          _foundToDo = todosList
+              .where((todo) => todo.isDone)
+              .toList(); // Display completed tasks
           break;
         case TaskCategory.pending:
-          _foundToDo = todosList.where((todo) => !todo.isDone).toList(); // Display pending tasks
+          _foundToDo = todosList
+              .where((todo) => !todo.isDone)
+              .toList(); // Display pending tasks
           break;
       }
     });
@@ -131,115 +142,87 @@ class _TasksScreenState extends State<TasksScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Row(
-          children: [
-            Padding(
-              padding: const EdgeInsets.only(left: 35.0),
-              child: Icon(Icons.assignment),
-            ),
-            SizedBox(width: 8),
-            Text(
-              'Tasks App',
-              style: TextStyle(color: Colors.white),
-            ),
-          ],
-        ),
-        backgroundColor: const Color(0xFF883007),
-        iconTheme: IconThemeData(color: Colors.white),
-      ),
-      drawer: Drawer(
-        elevation: 0,
-        child: Column(
-          children: [
-            UserAccountsDrawerHeader(
-              currentAccountPicture: CircleAvatar(
-                backgroundImage: AssetImage("assets/profile.jpeg"),
+        //Drawer
+        drawer: NavDrawer(),
+        //app bar, responsible for all details deplayed on the app bar
+        appBar: AppBar(
+          backgroundColor: tdAbColor,
+          title: Container(
+              child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(
+                Icons.task,
+                color: whiteColor,
               ),
-              accountName: Text("Student"),
-              accountEmail: Text("student@gmail.com"),
-            ),
-            // Drawer menu items for different task categories
-            ListTile(
-              title: Text("All Tasks"),
-              leading: Icon(Icons.menu_outlined),
-              onTap: () => _setSelectedCategory(TaskCategory.all, context),
-            ),
-            ListTile(
-              title: Text("Completed Tasks"),
-              leading: Icon(Icons.check_box),
-              onTap: () => _setSelectedCategory(TaskCategory.completed, context),
-            ),
-            ListTile(
-              title: Text("Pending Tasks"),
-              leading: Icon(Icons.incomplete_circle),
-              onTap: () => _setSelectedCategory(TaskCategory.pending, context),
-            ),
-            ListTile(
-              title: Text("Help"),
-              leading: Icon(Icons.help_center),
-            ),
-            ListTile(
-              title: Text("Logout"),
-              leading: Icon(Icons.logout),
-            ),
-          ],
-        ),
-      ),
-      body: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
-        child: Column(
-          children: [
-            // Search bar for filtering tasks (optional)
-            Container(
-              padding: EdgeInsets.symmetric(horizontal: 15),
-              decoration: BoxDecoration(
-                color: Colors.white,
-                borderRadius: BorderRadius.circular(20),
+              SizedBox(
+                width: 20,
               ),
-              child: TextField(
-                onChanged: (keyword) {
-                  // Implement search functionality if needed
-                },
-                decoration: InputDecoration(
-                  contentPadding: EdgeInsets.all(0),
-                  prefixIcon: Icon(
-                    Icons.search,
-                    color: const Color(0xFF272626),
-                    size: 20,
+              Text(
+                "ToDo App",
+                style: titleFont,
+              ),
+            ],
+          )),
+          centerTitle: true,
+        ),
+        body: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
+          child: Column(
+            children: [
+              // Search bar for filtering tasks (optional)
+              Container(
+                padding: EdgeInsets.symmetric(horizontal: 15),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: TextField(
+                  onChanged: (keyword) {
+                    // Implement search functionality if needed
+                  },
+                  decoration: InputDecoration(
+                    contentPadding: EdgeInsets.all(0),
+                    prefixIcon: Icon(
+                      Icons.search,
+                      color: const Color(0xFF272626),
+                      size: 20,
+                    ),
+                    prefixIconConstraints:
+                        BoxConstraints(maxHeight: 20, minWidth: 25),
+                    border: InputBorder.none,
+                    hintText: "Search",
+                    hintStyle: TextStyle(color: Colors.grey),
                   ),
-                  prefixIconConstraints:
-                      BoxConstraints(maxHeight: 20, minWidth: 25),
-                  border: InputBorder.none,
-                  hintText: "Search",
-                  hintStyle: TextStyle(color: Colors.grey),
                 ),
               ),
-            ),
-            SizedBox(height: 20),
-            Expanded(
-              child: ListView.builder(
-                itemCount: _foundToDo.length,
-                itemBuilder: (context, index) => ToDoItem(
-                  todo: _foundToDo[index],
-                  onToDoChanged: _handleToDoChange,
-                  onDeleteItem: _deleteToDoItem,
+              SizedBox(height: 20),
+              Expanded(
+                child: ListView.builder(
+                  itemCount: _foundToDo.length,
+                  itemBuilder: (context, index) => ToDoItem(
+                    todo: _foundToDo[index],
+                    onToDoChanged: _handleToDoChange,
+                    onDeleteItem: _deleteToDoItem,
+                  ),
                 ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
-      ),
-      // Floating action button to add new task
-      floatingActionButton: FloatingActionButton(
-        onPressed: () {
-          // Show the dialog to add a new task
-          _showAddTaskDialog(context);
-        },
-        tooltip: 'Add New Task',
-        child: Icon(Icons.add),
-      ),
-      backgroundColor: const Color(0xFFCECAB7),
-    );
+        // Floating action button to add new task
+        floatingActionButton: FloatingActionButton(
+          onPressed: () {
+            // Show the dialog to add a new task
+            _showAddTaskDialog(context);
+          },
+          tooltip: 'Add New Task',
+          child: Icon(
+            Icons.add,
+            color: tdAbColor,
+          ),
+          backgroundColor: whiteColor,
+        ),
+        backgroundColor: tdBgColor);
   }
 }