UI Components and Observers in MobX State Management

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:your_app/stores/task_store.dart';
import 'package:your_app/widgets/task_item.dart';

class HomeScreen extends StatelessWidget {
  final TaskStore taskStore;

  HomeScreen({required this.taskStore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Task Manager')),
      body: Observer(
        builder: (_) => ListView.builder(
          itemCount: taskStore.taskList.length,
          itemBuilder: (context, index) {
            final task = taskStore.taskList[index];
            return TaskItem(
              task: task,
              onToggle: () => taskStore.toggleTaskStatus(task.id),
              onDelete: () => taskStore.removeTask(task.id),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddTaskScreen(taskStore: taskStore),
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:your_app/models/task.dart';

class TaskItem extends StatelessWidget {
  final Task task;
  final VoidCallback onToggle;
  final VoidCallback onDelete;

  TaskItem({
    required this.task,
    required this.onToggle,
    required this.onDelete,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(task.title),
      subtitle: Text(task.description),
      leading: Checkbox(
        value: task.isCompleted,
        onChanged: (_) => onToggle(),
      ),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: onDelete,
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:your_app/stores/task_store.dart';
import 'package:your_app/models/task.dart';

class AddTaskScreen extends StatelessWidget {
  final TaskStore taskStore;
  final TextEditingController titleController = TextEditingController();
  final TextEditingController descriptionController = TextEditingController();

  AddTaskScreen({required this.taskStore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Add New Task')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            TextField(
              controller: descriptionController,
              decoration: InputDecoration(labelText: 'Description'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                final task = Task(
                  id: DateTime.now().toString(),
                  title: titleController.text,
                  description: descriptionController.text,
                  isCompleted: false,
                );
                taskStore.addTask(task);
                Navigator.pop(context);
              },
              child: Text('Add Task'),
            ),
          ],
        ),
      ),
    );
  }
}

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => AddTaskScreen(taskStore: taskStore),
  ),
);

// In TaskStore
@computed
List<Task> get completedTasks => taskList.where((task) => task.isCompleted).toList();

@computed
List<Task> get pendingTasks => taskList.where((task) => !task.isCompleted).toList();

    graph TD;
	    A[User Interaction] --> B[TaskStore];
	    B --> C[Observer Widget];
	    C --> D[UI Update];
	    B --> E[Computed Properties];
	    E --> C;

### What is the primary role of the `Observer` widget in MobX? - [x] To listen for changes in observable state and rebuild the UI when changes occur. - [ ] To manage navigation between screens. - [ ] To handle user inputs and form submissions. - [ ] To store application-wide settings. > **Explanation:** The `Observer` widget in MobX listens for changes in observable state and rebuilds the UI when changes occur, ensuring the UI is always up-to-date. ### In the `HomeScreen` example, what does the `FloatingActionButton` do? - [x] It navigates to the `AddTaskScreen`. - [ ] It deletes all tasks. - [ ] It marks all tasks as completed. - [ ] It refreshes the task list. > **Explanation:** The `FloatingActionButton` is used to navigate to the `AddTaskScreen`, allowing users to add new tasks. ### How are new tasks added to the `taskStore` in the `AddTaskScreen`? - [x] By creating a new `Task` object and calling `taskStore.addTask(task)`. - [ ] By directly modifying the `taskList`. - [ ] By using a `setState` call. - [ ] By sending a request to a backend server. > **Explanation:** New tasks are added by creating a `Task` object and calling the `addTask` method on the `taskStore`, which manages the list of tasks. ### What is the purpose of computed properties in the `TaskStore`? - [x] To provide derived data, such as filtered lists of tasks. - [ ] To handle user authentication. - [ ] To manage network requests. - [ ] To store application settings. > **Explanation:** Computed properties in MobX are used to provide derived data, such as filtered lists of tasks, based on the current state. ### Why should UI components be kept stateless when possible? - [x] To improve performance and maintainability. - [ ] To reduce the number of files in the project. - [ ] To simplify navigation logic. - [ ] To ensure compatibility with older devices. > **Explanation:** Keeping UI components stateless improves performance and maintainability by separating UI logic from state management. ### What is the benefit of using `Navigator.push` in Flutter? - [x] It allows for navigation to new screens. - [ ] It updates the state of the current screen. - [ ] It refreshes the widget tree. - [ ] It saves user preferences. > **Explanation:** `Navigator.push` is used in Flutter to navigate to new screens, enabling users to move through different parts of the app. ### How does the `Checkbox` widget in the `TaskItem` function? - [x] It allows users to toggle the completion status of a task. - [ ] It deletes the task when checked. - [ ] It opens a detailed view of the task. - [ ] It shares the task on social media. > **Explanation:** The `Checkbox` widget in the `TaskItem` allows users to toggle the completion status of a task, updating its state. ### What happens when the `onDelete` callback is triggered in the `TaskItem`? - [x] The task is removed from the `taskStore`. - [ ] The task is marked as completed. - [ ] The task is duplicated. - [ ] The task is archived. > **Explanation:** When the `onDelete` callback is triggered, the task is removed from the `taskStore`, effectively deleting it from the list. ### How do `Observer` widgets contribute to performance optimization? - [x] By only rebuilding parts of the UI that depend on the observed state. - [ ] By caching network requests. - [ ] By reducing the number of widgets in the tree. - [ ] By compressing images used in the app. > **Explanation:** `Observer` widgets contribute to performance optimization by only rebuilding parts of the UI that depend on the observed state, minimizing unnecessary updates. ### True or False: MobX requires all widgets to be wrapped in `Observer` widgets. - [ ] True - [x] False > **Explanation:** False. MobX only requires widgets that need to react to changes in observable state to be wrapped in `Observer` widgets, not all widgets.