From 6e2d325994f1794313298eeb4189a0bbd30a47bb Mon Sep 17 00:00:00 2001 From: hunteraraujo Date: Wed, 23 Aug 2023 08:31:54 -0700 Subject: [PATCH] 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 | 9 ++++- lib/views/main_layout.dart | 21 ++++++++--- lib/views/task_view.dart | 75 +++++++++++++++++++++++++++++++++----- 3 files changed, 89 insertions(+), 16 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 31c85d63..8b53d1b7 100644 --- a/lib/main.dart +++ b/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 ); } } diff --git a/lib/views/main_layout.dart b/lib/views/main_layout.dart index 655e6749..3639d978 100644 --- a/lib/views/main_layout.dart +++ b/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(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; diff --git a/lib/views/task_view.dart b/lib/views/task_view.dart index 52a4c378..9295e9a2 100644 --- a/lib/views/task_view.dart +++ b/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 { + @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'); + }, + ); + }, + ), + ), + ], ), ); }