Refactor UI with New Widgets and Provider Integration

In this commit, the app underwent significant UI improvements by leveraging new, more modular widgets (NewTaskButton and TaskListTile). This ensures better code maintainability and a cleaner architecture.

Key changes include:

Integrated ChangeNotifierProvider in main.dart to facilitate the creation and broadcasting of TaskViewModel.
Refactored TaskView to utilize the newly created NewTaskButton and TaskListTile widgets.
Updated MainLayout to reflect the changes and provide a more cohesive user experience.

lib/main.dart

@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart';
 import 'views/main_layout.dart';
+import 'package:provider/provider.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 
 void main() {
   runApp(const MyApp());
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+  const MyApp({Key? key}) : super(key: key); // Corrected the constructor
 
   @override
   Widget build(BuildContext context) {
@@ -15,7 +17,10 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: const MainLayout(), // Set MainLayout as the home screen of the app
+      home: ChangeNotifierProvider(
+        create: (context) => TaskViewModel(),
+        child: const MainLayout(),
+      ), // Set MainLayout as the home screen of the app
     );
   }
 }

lib/views/main_layout.dart

@@ -1,21 +1,30 @@
 import 'package:auto_gpt_flutter_client/views/task_view.dart';
 import 'package:auto_gpt_flutter_client/views/chat_view.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart'; // Importing the TaskViewModel
+import 'package:provider/provider.dart'; // Required for accessing the ViewModel
 
 class MainLayout extends StatelessWidget {
-  const MainLayout({super.key});
+  const MainLayout({Key? key}) : super(key: key); // Corrected the constructor
 
   @override
   Widget build(BuildContext context) {
     // Get the screen width
     double width = MediaQuery.of(context).size.width;
 
+    // Access the TaskViewModel from the context
+    final taskViewModel = Provider.of<TaskViewModel>(context);
+
     // Check the screen width and return the appropriate layout
     if (width > 800) {
       // For larger screens, return a side-by-side layout
-      return const Row(
+      return Row(
         children: [
-          SizedBox(width: 280, child: TaskView()),
+          SizedBox(
+              width: 280,
+              child: TaskView(
+                  viewModel:
+                      taskViewModel)), // Pass the viewModel to the TaskView
           Expanded(child: ChatView()),
         ],
       );
@@ -40,8 +49,10 @@ class MainLayout extends StatelessWidget {
           switch (index) {
             case 0:
               returnValue = CupertinoTabView(builder: (context) {
-                return const CupertinoPageScaffold(
-                  child: TaskView(),
+                return CupertinoPageScaffold(
+                  child: TaskView(
+                      viewModel:
+                          taskViewModel), // Pass the viewModel to the TaskView
                 );
               });
               break;

lib/views/task_view.dart

@@ -1,17 +1,74 @@
+import 'package:auto_gpt_flutter_client/views/new_task_button.dart';
+import 'package:auto_gpt_flutter_client/views/task_list_tile.dart';
 import 'package:flutter/material.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 
-class TaskView extends StatelessWidget {
-  const TaskView({super.key});
+class TaskView extends StatefulWidget {
+  final TaskViewModel viewModel;
+
+  const TaskView({Key? key, required this.viewModel}) : super(key: key);
+
+  @override
+  _TaskViewState createState() => _TaskViewState();
+}
+
+class _TaskViewState extends State<TaskView> {
+  @override
+  void initState() {
+    super.initState();
+
+    // Schedule the fetchTasks call for after the initial build
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      widget.viewModel.fetchTasks();
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      color: Colors.blue,
-      child: const Center(
-        child: Text(
-          'Tasks',
-          style: TextStyle(fontSize: 24, color: Colors.white),
-        ),
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Column(
+        children: [
+          // Title and New Task button
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              children: [
+                Text(
+                  'Tasks',
+                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.normal),
+                ),
+                SizedBox(height: 8),
+                NewTaskButton(
+                  onPressed: () {
+                    // TODO: Implement add new task action
+                    print('Add new task button pressed');
+                  },
+                )
+              ],
+            ),
+          ),
+          // Task List
+          Expanded(
+            child: ListView.builder(
+              itemCount: widget.viewModel.tasks.length,
+              itemBuilder: (context, index) {
+                final task = widget.viewModel.tasks[index];
+                return TaskListTile(
+                  task: task,
+                  onTap: () {
+                    // TODO: Implement the action when a task is tapped. This should trigger the TaskView to update.
+                    print('Task ${task.title} tapped');
+                  },
+                  onDelete: () {
+                    // TODO: Implement the action when a task is needing to be deleted. This should trigger the TaskView to update.
+                    print('Task ${task.title} delete button tapped');
+                  },
+                );
+              },
+            ),
+          ),
+        ],
       ),
     );
   }