Improve design

TheMedo · Oct 29, 2024 · 92f4214 · 92f4214
1 parent 1f13e5f
commit 92f4214
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 71 deletions.
diff --git a/lib/screen/details/details_screen.dart b/lib/screen/details/details_screen.dart
@@ -37,9 +37,6 @@ class _DetailsScreenState extends State<DetailsScreen> {
 
   @override
   Widget build(BuildContext context) {
-    final brightness = MediaQuery.of(context).platformBrightness;
-    final isDarkMode = brightness == Brightness.dark;
-
     return PopScope(
       onPopInvokedWithResult: (isPopped, _) {
         if (isPopped && text != widget.todo.text) {
@@ -53,33 +50,33 @@ class _DetailsScreenState extends State<DetailsScreen> {
             style: Theme.of(context).textTheme.headlineLarge,
           ),
           centerTitle: true,
-        ),
-        body: Column(
-          children: [
-            TextField(
-              controller: _controller,
-              decoration: InputDecoration(
-                border: OutlineInputBorder(),
-              ),
-              onChanged: (value) {
-                setState(() {
-                  text = value;
-                });
-              },
-            ),
-            ElevatedButton(
+          actions: [
+            IconButton(
               onPressed: () {
                 _deleteTodo(widget.todo.id);
                 Navigator.of(context).pop();
               },
-              style: ElevatedButton.styleFrom(
-                backgroundColor: isDarkMode ? Colors.red : Colors.deepOrange,
-                foregroundColor: Colors.white,
-              ),
-              child: Text('Delete'),
-            ),
+              icon: Icon(Icons.delete_outline),
+              tooltip: 'Delete',
+            )
           ],
         ),
+        body: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            children: [
+              TextField(
+                controller: _controller,
+                decoration: InputDecoration(labelText: 'Edit todo'),
+                onChanged: (value) {
+                  setState(() {
+                    text = value;
+                  });
+                },
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }

diff --git a/lib/screen/home/home_screen.dart b/lib/screen/home/home_screen.dart
@@ -73,28 +73,31 @@ class _HomeScreenState extends State<HomeScreen> {
       ),
       body: Column(
         children: [
-          SearchFilterBar(
-            onChanged: (query) {
-              setState(() {
-                searchQuery = query;
-                displayTodos = _filterTodos(allTodos);
-              });
-            },
-            onFilter: () {
-              showModalBottomSheet<bool>(
-                  context: context,
-                  builder: (context) {
-                    return FilterBottomSheet(
-                      initialHideCompleted: hideCompleted,
-                      onHideCompleted: (checked) {
-                        setState(() {
-                          hideCompleted = checked;
-                          displayTodos = _filterTodos(allTodos);
-                        });
-                      },
-                    );
-                  });
-            },
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: SearchFilterBar(
+              onChanged: (query) {
+                setState(() {
+                  searchQuery = query;
+                  displayTodos = _filterTodos(allTodos);
+                });
+              },
+              onFilter: () {
+                showModalBottomSheet<bool>(
+                    context: context,
+                    builder: (context) {
+                      return FilterBottomSheet(
+                        initialHideCompleted: hideCompleted,
+                        onHideCompleted: (checked) {
+                          setState(() {
+                            hideCompleted = checked;
+                            displayTodos = _filterTodos(allTodos);
+                          });
+                        },
+                      );
+                    });
+              },
+            ),
           ),
           Expanded(
             child: TodosList(
@@ -104,11 +107,14 @@ class _HomeScreenState extends State<HomeScreen> {
               },
             ),
           ),
-          TextInputRow(
-            onAdd: (text) {
-              if (userId == null) return;
-              _addTodo(text, userId);
-            },
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: TextInputRow(
+              onAdd: (text) {
+                if (userId == null) return;
+                _addTodo(text, userId);
+              },
+            ),
           ),
         ],
       ),

diff --git a/lib/screen/home/widgets/search_filter_bar.dart b/lib/screen/home/widgets/search_filter_bar.dart
@@ -39,38 +39,25 @@ class _SearchFilterBarState extends State<SearchFilterBar> {
     return Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(25),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.grey.withOpacity(0.2),
-            spreadRadius: 1,
-            blurRadius: 4,
-            offset: const Offset(0, 2),
-          ),
-        ],
+        color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
       ),
       child: TextField(
         controller: _controller,
         onChanged: widget.onChanged,
         decoration: InputDecoration(
-          prefixIcon: const Icon(
-            Icons.search,
-            color: Colors.grey,
-          ),
+          prefixIcon: const Icon(Icons.search),
           suffixIcon: _controller.text.isNotEmpty
               ? IconButton(
                   icon: const Icon(Icons.clear),
                   onPressed: _clearSearch,
-                  color: Colors.grey,
                 )
               : IconButton(
                   icon: const Icon(Icons.more_vert),
                   onPressed: widget.onFilter,
-                  color: Colors.grey,
                 ),
           hintText: 'Search...',
-          hintStyle: const TextStyle(
-            color: Colors.grey,
-            fontSize: 16,
+          hintStyle: TextStyle(
+            color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
           ),
           border: InputBorder.none,
           contentPadding: const EdgeInsets.symmetric(

diff --git a/lib/screen/home/widgets/text_input_row.dart b/lib/screen/home/widgets/text_input_row.dart
@@ -27,7 +27,13 @@ class _TextInputRowState extends State<TextInputRow> {
             controller: _controller,
             decoration: InputDecoration(
               hintText: 'Enter your todo',
-              border: OutlineInputBorder(),
+              hintStyle: TextStyle(
+                color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
+              ),
+              border: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(25),
+              ),
+              prefixIcon: Icon(Icons.edit_outlined),
             ),
           ),
         ),
@@ -39,6 +45,11 @@ class _TextInputRowState extends State<TextInputRow> {
               _controller.clear();
             }
           },
+          style: ElevatedButton.styleFrom(
+            backgroundColor: Colors.blueGrey,
+            foregroundColor: Colors.white,
+            fixedSize: const Size(88, 54),
+          ),
           child: Text('Add'),
         ),
       ],

diff --git a/lib/screen/home/widgets/todos_list.dart b/lib/screen/home/widgets/todos_list.dart
@@ -15,8 +15,6 @@ class TodosList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (todos.isEmpty) return Center(child: Text('Add your first ToDo'));
-
     return ListView.builder(
       itemCount: todos.length,
       itemBuilder: (context, index) {