I am reading Chapter 7 of the Flutter Cookbook – Second Edition by Simone Alessandria, and I noticed that WillPopScope has been is now PopScope in Flutter. I do not know how to modify the code with PopScope.

Here is the code:

import 'package:flutter/material.dart'; // Importing necessary Flutter package for Material design components
import '../models/data_layer.dart'; // Importing custom data models
import '../plan_provider.dart'; // Importing custom provider for managing plan data

// The PlanScreen is a StatefulWidget that represents the main screen displaying the plan details
class PlanScreen extends StatefulWidget {
  final Plan plan; // A Plan object passed to the screen
  const PlanScreen(
      {super.key,
      required this.plan}); // Constructor to initialize the PlanScreen with the given Plan

  @override
  State<PlanScreen> createState() =>
      _PlanScreenState(); // Creating state for PlanScreen
}

// State class for PlanScreen
class _PlanScreenState extends State<PlanScreen> {
  late ScrollController
      scrollController; // ScrollController to manage scroll position and events
  Plan get plan =>
      widget.plan; // Getter to access the Plan object from the widget

  @override
  void initState() {
    // Initializing the ScrollController and adding a listener to hide the keyboard when scrolled
    scrollController = ScrollController()
      ..addListener(() {
        FocusScope.of(context)
            .requestFocus(FocusNode()); // Hide keyboard on scroll
      });

    super.initState(); // Calling the superclass initState method
  }

  @override
  Widget build(BuildContext context) {
    // Building the UI of the PlanScreen
    return WillPopScope(
      // Handling back navigation to save the plan before exiting
      onWillPop: () {
        final controller =
            PlanProvider.of(context); // Accessing the PlanProvider
        controller.savePlan(plan); // Saving the current plan
        return Future.value(true); // Indicating that the screen can be popped
      },
      child: Scaffold(
        // Main scaffold for the screen
        appBar: AppBar(title: const Text('Master Plan')), // App bar with title
        body: Column(children: [
          Expanded(child: _buildList()), // Building the list of tasks
          SafeArea(
              child: Text(plan
                  .completenessMessage)) // Displaying the plan completeness message
        ]),
        floatingActionButton:
            _buildAddTaskButton(), // Floating action button to add a new task
      ),
    );
  }

  // Method to build the FloatingActionButton
  Widget _buildAddTaskButton() {
    return FloatingActionButton(
      child: const Icon(Icons.add), // Icon for the button
      onPressed: () {
        final controller =
            PlanProvider.of(context); // Accessing the PlanProvider
        controller.createNewTask(plan); // Creating a new task
        setState(() {}); // Updating the state to reflect the new task
      },
    );
  }

  // Method to build the list of tasks using ListView.builder
  Widget _buildList() {
    return ListView.builder(
      controller: scrollController, // Assigning the ScrollController
      itemCount: plan.tasks.length, // Number of items in the list
      itemBuilder: (context, index) =>
          _buildTaskTile(plan.tasks[index]), // Building each task tile
    );
  }

  // Method to build a single task tile
  Widget _buildTaskTile(Task task) {
    return Dismissible(
      key: ValueKey(task), // Unique key for each task
      background:
          Container(color: Colors.red), // Background color when dismissing
      direction: DismissDirection.endToStart, // Dismiss direction
      onDismissed: (_) {
        final controller =
            PlanProvider.of(context); // Accessing the PlanProvider
        controller.deleteTask(plan, task); // Deleting the task
        setState(() {}); // Updating the state to reflect the task deletion
      },
      child: ListTile(
          leading: Checkbox(
              value: task.complete, // Checkbox to mark task as complete
              onChanged: (selected) {
                setState(() {
                  task.complete =
                      selected ?? false; // Updating task completion status
                });
              }),
          title: TextFormField(
            initialValue:
                task.description, // Initial value for the task description
            onFieldSubmitted: (text) {
              setState(() {
                task.description = text; // Updating task description
              });
            },
          )),
    );
  }

  @override
  void dispose() {
    // Disposing the ScrollController when the state is disposed
    scrollController.dispose();
    super.dispose(); // Calling the superclass dispose method
  }
}

The full code can be found on the author’s GitHub