feat(ref: no-ref): todo mvc app

andriikamaldinov1 · web-flow · commit 8f18dce0b3de · 2024-12-31T15:05:50.000+02:00
diff --git a/lib/common/button/button.widget.dart b/lib/common/button/button.widget.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class ButtonWidget extends StatelessWidget {
+  const ButtonWidget(
+      {
+        required this.title,
+        required this.onTap,
+        this.isActive = false,
+        super.key});
+
+  final String title;
+  final bool isActive;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) => InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(14),
+      child: Container(
+          height: 40,
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          decoration: BoxDecoration(
+              border: Border.all(
+                  color: isActive ? Colors.red : Colors.transparent,
+                  width: 2,
+              ),
+              borderRadius: BorderRadius.circular(14)),
+          child: Center(
+              child: Text(title,
+                style: const TextStyle(
+                  fontSize: 14,
+                ),
+              )
+          )
+      )
+  );
+}
diff --git a/lib/common/input/input.widget.dart b/lib/common/input/input.widget.dart
@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+
+class InputWidget extends StatelessWidget {
+  const InputWidget({
+    required this.textController,
+    required this.focusNode,
+    required this.onSubmitted,
+    this.hintText = '',
+    super.key,
+  });
+  
+  final TextEditingController textController;
+  final FocusNode focusNode;
+  final String hintText;
+  final Function(String) onSubmitted;
+  
+
+  @override
+  Widget build(BuildContext context) => TextField(
+      controller: textController,
+      focusNode: focusNode,
+      decoration: InputDecoration(
+        hintText: hintText,
+        hintStyle: const TextStyle(
+          fontSize: 18,
+          fontStyle: FontStyle.italic,
+          color: Colors.grey,
+        ),
+        border: InputBorder.none,
+        contentPadding:
+        const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+        focusedBorder: const OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.red, width: 2),
+        ),
+      ),
+      style: const TextStyle(fontSize: 18),
+      onSubmitted: onSubmitted,
+      onTapOutside: (PointerDownEvent event) {
+        focusNode.unfocus();
+      },
+    );
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'screens/home/home.screen.dart';
+import 'screens/home/home.binding.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) => GetMaterialApp(
+      initialBinding: HomeBinding(),
+      home: const HomeScreen(),
+    );
+}
diff --git a/lib/screens/home/home.binding.dart b/lib/screens/home/home.binding.dart
@@ -0,0 +1,16 @@
+import 'package:get/get.dart';
+import 'todo/add-task/add-task.controller.dart';
+import 'todo/filter-panel/filter-panel.controller.dart';
+import 'todo/task-list-item/task-list-item.controller.dart';
+import 'todo/todo.service.dart';
+
+class HomeBinding extends Bindings {
+  @override
+  Future<void> dependencies() async {
+    Get
+    ..lazyPut(TodoService.new)
+    ..lazyPut(() => AddTaskController(Get.find()))
+    ..lazyPut(() => FilterPanelController(Get.find()))
+    ..lazyPut(() => TaskListItemController(Get.find(), Get.find()));
+  }
+}
diff --git a/lib/screens/home/home.screen.dart b/lib/screens/home/home.screen.dart
@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'todo/todo.widget.dart';
+import '../home/title/title.widget.dart';
+
+class HomeScreen extends StatelessWidget {
+  const HomeScreen({super.key});
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        backgroundColor: Colors.white,
+        body: ListView(
+          children: const <Widget>[
+            Center(child: TitleWidget()),
+            TodoWidget(),
+          ],
+        ),
+      );
+}
diff --git a/lib/screens/home/title/title.widget.dart b/lib/screens/home/title/title.widget.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class TitleWidget extends StatelessWidget {
+  const TitleWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) => const Padding(
+      padding: EdgeInsets.only(top: 50, bottom: 20),
+      child: Text(
+        'todos',
+        style: TextStyle(
+          fontSize: 80,
+          fontWeight: FontWeight.w300,
+          color: Colors.red,
+        ),
+      ),
+    );
+}
diff --git a/lib/screens/home/todo/add-task/add-task.controller.dart b/lib/screens/home/todo/add-task/add-task.controller.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/cupertino.dart';
+import 'package:get/get.dart';
+import '../todo.service.dart';
+
+class AddTaskController extends GetxController {
+  AddTaskController(this._todoService);
+
+  final TodoService _todoService;
+  final TextEditingController textController = TextEditingController();
+  final FocusNode focusNode = FocusNode();
+
+  void addTask(String task) {
+    if(task.isNotEmpty) {
+      _todoService.addTask(task);
+      textController.clear();
+    }
+  }
+}
diff --git a/lib/screens/home/todo/add-task/add-task.widget.dart b/lib/screens/home/todo/add-task/add-task.widget.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import '../../../../common/input/input.widget.dart';
+import 'add-task.controller.dart';
+
+class AddTaskWidget extends GetView<AddTaskController> {
+  const AddTaskWidget({ super.key });
+
+
+  @override
+  Widget build(BuildContext context) => Container(
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(color: Colors.grey.shade300),
+        ),
+      ),
+      child: InputWidget(
+        textController: controller.textController,
+        focusNode: controller.focusNode,
+        hintText: 'What needs to be done?',
+        onSubmitted: controller.addTask,
+      ),
+    );
+}
diff --git a/lib/screens/home/todo/filter-panel/filter-panel-buttons/filter-panel-buttons.dart b/lib/screens/home/todo/filter-panel/filter-panel-buttons/filter-panel-buttons.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import '../../../../../../common/button/button.widget.dart';
+import '../filter-panel.enum.dart';
+import '../filter-panel.controller.dart';
+
+class FilterPanelButtons extends GetView<FilterPanelController> {
+  const FilterPanelButtons({super.key});
+
+  @override
+  Widget build(BuildContext context) => Obx(() {
+    return Wrap(
+      spacing: 10,
+      children: controller.filters
+          .map<Widget>(
+            (FilterType filter) => ButtonWidget(
+          title: filter.type,
+          isActive: controller.currentFilter.value == filter,
+          onTap: () => controller.setFilter(filter),
+        ),
+      )
+          .toList(),
+    );
+  });
+}
diff --git a/lib/screens/home/todo/filter-panel/filter-panel.controller.dart b/lib/screens/home/todo/filter-panel/filter-panel.controller.dart
@@ -0,0 +1,25 @@
+import 'package:get/get.dart';
+import '../todo.model.dart';
+import '../todo.service.dart';
+import 'filter-panel.enum.dart';
+
+class FilterPanelController extends GetxController {
+  FilterPanelController(this._todoService);
+
+  final TodoService _todoService;
+  final Rx<FilterType> currentFilter = FilterType.all.obs;
+  final List<FilterType> filters = FilterType.values;
+
+  List<TaskModel> get filteredTasks => _todoService.filteredTasks(currentFilter.value);
+  List<TaskModel> get tasks => _todoService.tasks;
+
+  int get activeCount => _todoService.activeCount;
+
+  void clearCompleted() {
+    _todoService.clearCompleted();
+  }
+
+  void setFilter(FilterType filter) {
+    currentFilter.value = filter;
+  }
+}
diff --git a/lib/screens/home/todo/filter-panel/filter-panel.enum.dart b/lib/screens/home/todo/filter-panel/filter-panel.enum.dart
@@ -0,0 +1,9 @@
+enum FilterType {
+  all('All'),
+  active('Active'),
+  completed('Completed');
+
+  const FilterType(this.type);
+
+  final String type;
+}
diff --git a/lib/screens/home/todo/filter-panel/filter-panel.widget.dart b/lib/screens/home/todo/filter-panel/filter-panel.widget.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import '../../../../common/button/button.widget.dart';
+import 'filter-panel-buttons/filter-panel-buttons.dart';
+import 'filter-panel.controller.dart';
+
+class FilterPanelWidget extends GetView<FilterPanelController> {
+  const FilterPanelWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) => Obx(() {
+    final bool isMobile = MediaQuery.of(context).size.width < 600;
+
+    if (controller.tasks.isEmpty) {
+      return const SizedBox();
+    }
+
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: <Widget>[
+              Text(
+                '${controller.activeCount} items left',
+                style: const TextStyle(fontSize: 14, color: Colors.grey),
+              ),
+              if (!isMobile) const FilterPanelButtons(),
+              ButtonWidget(
+                onTap: controller.clearCompleted,
+                title: 'Clear completed',
+              ),
+            ],
+          ),
+          if (isMobile)
+            const Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                FilterPanelButtons(),
+              ],
+            ),
+        ],
+      ),
+    );
+  });
+}
diff --git a/lib/screens/home/todo/task-list-item/task-list-item.controller.dart b/lib/screens/home/todo/task-list-item/task-list-item.controller.dart
@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import '../todo.model.dart';
+import '../todo.service.dart';
+
+class TaskListItemController extends GetxController {
+  TaskListItemController(this.task, this._todoService);
+
+  final TodoService _todoService;
+  final TextEditingController textController = TextEditingController();
+  final FocusNode focusNode = FocusNode();
+  final RxBool isEditing = false.obs;
+  final RxBool isHovered = false.obs;
+  final TaskModel task;
+
+  @override
+  void onInit() {
+    super.onInit();
+    textController.text = task.title;
+
+    focusNode.addListener(() {
+      if (!focusNode.hasFocus && isEditing.value) {
+        cancelEditing();
+      }
+    });
+  }
+
+  @override
+  void onClose() {
+    textController.dispose();
+    focusNode.dispose();
+    super.onClose();
+  }
+
+  void startEditing() {
+    isEditing.value = true;
+    focusNode.requestFocus();
+  }
+
+  void saveEdit(String value) {
+    if (value.isNotEmpty) {
+      _todoService.updateTaskText(task.id, value);
+    }
+    isEditing.value = false;
+  }
+
+  void cancelEditing() {
+    isEditing.value = false;
+    textController.text = task.title;
+  }
+
+  void toggleHover({required bool isHovered}) {
+    this.isHovered.value = isHovered;
+  }
+
+  void toggleCompletion({bool? isFinished}) {
+    if (isFinished != null) {
+      _todoService.updateTaskStatus(task.id, isFinished: isFinished);
+    }
+  }
+
+  void deleteTask() {
+    _todoService.deleteTask(task.id);
+  }
+}
diff --git a/lib/screens/home/todo/task-list-item/task-list-item.widget.dart b/lib/screens/home/todo/task-list-item/task-list-item.widget.dart
diff --git a/lib/screens/home/todo/task-list/task-list.widget.dart b/lib/screens/home/todo/task-list/task-list.widget.dart
diff --git a/lib/screens/home/todo/todo.model.dart b/lib/screens/home/todo/todo.model.dart
diff --git a/lib/screens/home/todo/todo.service.dart b/lib/screens/home/todo/todo.service.dart
diff --git a/lib/screens/home/todo/todo.widget.dart b/lib/screens/home/todo/todo.widget.dart
diff --git a/test/widget_test.dart b/test/widget_test.dart
