Flutter页面返回报错：_TreeDesignPageState未调用super.dispose

问题场景 #

开发的Flutter应用实现了树木图片选择功能：点击树木选择页面的图片后，主页面的默认树木图片会切换为所选图片。功能运行正常，但从树木选择页面返回主页面时，调试控制台抛出错误：
Exception caught by widgets library _TreeDesignPageState.dispose failed to call super.dispose

相关截图 #

报错截图 #

模拟器运行效果 #

主页面：

树木选择页面：

相关代码 #

main_page.dart #

import 'package:flutter/material.dart';
import 'package:app/pages/tree_design_page.dart';
import 'package:app/models/tree_model.dart';

class MainPage extends StatelessWidget {
  const MainPage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/green_meadow.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: Stack(
          children: [
            // Background Image
            Positioned.fill(
              child: Image.asset(
                'images/green_meadow.jpg',
                fit: BoxFit.cover,
              ),
            ),
            // Overlay Image
            Positioned(
              bottom: 10,
              left: 105.7,
              child: Image(
                image: AssetImage(treeModelList[selectedtreeindex].path),
                width: 200,
                height: 200,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

tree_design_page.dart #

import 'package:app/models/tree_model.dart';
import 'package:flutter/material.dart';

class TreeDesignPage extends StatefulWidget {
  const TreeDesignPage({
    super.key,
  });

  @override
  State<TreeDesignPage> createState() => _TreeDesignPageState();
}

int selectedtreeindex = 0;

class _TreeDesignPageState extends State<TreeDesignPage> with ChangeNotifier {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/landscape1.jpg'), //the background image
            fit: BoxFit.cover,
          ),
        ),
        child: PageView.builder(
          itemCount: treeModelList.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                InkWell(
                  onTap: () {
                    print("Clicked ${treeModelList[index].id}!");
                    selectedtreeindex = index;
                    notifyListeners();
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(treeModelList[index].path),
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

问题分析与修复 #

1. 解决dispose报错 #

原因：_TreeDesignPageState混入了ChangeNotifier，但未重写dispose方法并调用super.dispose()。页面销毁时，Flutter需要调用dispose释放资源，缺少父类方法调用会导致资源泄漏报错。

修复代码：在_TreeDesignPageState中添加dispose方法：

class _TreeDesignPageState extends State<TreeDesignPage> with ChangeNotifier {
  @override
  Widget build(BuildContext context) {
    // 原build代码不变
  }

  @override
  void dispose() {
    super.dispose(); // 必须调用，确保State和ChangeNotifier的资源都被正确释放
  }
}

2. 优化状态管理（解决主页面不自动更新问题） #

原代码使用全局变量selectedtreeindex，且MainPage是StatelessWidget，状态变化时无法自动重建更新图片。建议使用ChangeNotifier配合Provider实现规范的状态管理：

步骤1：创建状态管理类

import 'package:flutter/material.dart';
import 'package:app/models/tree_model.dart';

class TreeSelectionProvider with ChangeNotifier {
  int _selectedTreeIndex = 0;

  int get selectedTreeIndex => _selectedTreeIndex;

  void selectTree(int index) {
    _selectedTreeIndex = index;
    notifyListeners();
  }
}

步骤2：在入口处提供状态

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TreeSelectionProvider(),
      child: const MyApp(),
    ),
  );
}

步骤3：修改树木选择页面

class _TreeDesignPageState extends State<TreeDesignPage> {
  @override
  Widget build(BuildContext context) {
    final treeSelection = Provider.of<TreeSelectionProvider>(context);
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/landscape1.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: PageView.builder(
          itemCount: treeModelList.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                InkWell(
                  onTap: () {
                    print("Clicked ${treeModelList[index].id}!");
                    treeSelection.selectTree(index);
                    Navigator.pop(context); // 返回主页面
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(treeModelList[index].path),
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

步骤4：修改主页面

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    final treeSelection = Provider.of<TreeSelectionProvider>(context);
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/green_meadow.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: Stack(
          children: [
            Positioned.fill(
              child: Image.asset(
                'images/green_meadow.jpg',
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              bottom: 10,
              left: 105.7,
              child: Image(
                image: AssetImage(treeModelList[treeSelection.selectedTreeIndex].path),
                width: 200,
                height: 200,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者loupdaniel