Flutter钱包应用使用IndexedStack后出现Scaffold相关错误求助

核心错误原因 #

你的代码存在无限递归创建组件的严重问题：pages列表中第一个元素是HomeScreen()，而HomeScreen本身的build方法又会初始化这个列表，导致程序不断创建HomeScreen实例，最终引发栈溢出和一系列异常，这是标题等错误的主要根源。另外如果你的根组件没有用MaterialApp包裹，也会导致Scaffold、BottomNavigationBar等组件无法获取正确的Material上下文，引发主题、导航相关错误。

修复步骤 #

1. 拆分首页组件：创建独立的首页内容组件（比如HomePage），替换pages里的HomeScreen()
2. 确保根组件是MaterialApp：将HomeScreen作为MaterialApp的主页，提供正确的上下文环境
3. 清理递归引用：移除pages中的HomeScreen实例，替换为独立的页面组件

修复后的完整代码 #

1. 独立首页组件（新建home_page.dart） #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("首页内容"),
    );
  }
}

2. 修改后的HomeScreen代码 #

import 'package:flutter/material.dart';
import 'package:mytodo/screens/quick_send.dart';
import 'package:mytodo/screens/wallet_screen.dart';
import 'package:mytodo/screens/home_page.dart'; // 导入新的首页组件

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentPage = 0;
  // 替换为独立页面组件，避免递归
  final List<Widget> pages = const [
    HomePage(),
    QuickSend(),
    WalletScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: IndexedStack(
        index: _currentPage,
        children: pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) {
          setState(() {
            _currentPage = value;
          });
        },
        currentIndex: _currentPage,
        selectedIconTheme: const IconThemeData(color: Colors.blue),
        unselectedIconTheme: const IconThemeData(color: Colors.green),
        items: const [
          BottomNavigationBarItem(
            label: "Home",
            icon: Icon(Icons.home_rounded),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.monetization_on_outlined),
            label: "Payment",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.wallet),
            label: "Wallet",
          ),
        ],
      ),
    );
  }
}

3. 根组件示例（main.dart） #

import 'package:flutter/material.dart';
import 'package:mytodo/screens/home_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter钱包应用',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

额外说明 #

• IndexedStack会同时加载所有页面组件，适合需要保持页面状态的场景；如果不需要保持状态，可以用PageView或者直接切换body的Widget
• 确保每个页面组件（QuickSend、WalletScreen）都是独立的StatelessWidget或StatefulWidget，不要嵌套HomeScreen

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