Flutter切换Tab后AppBar颜色未恢复默认问题求助

首页滚动时AppBar会变暗，但切换到其他Tab后，深色状态依然保留，希望切换Tab时AppBar恢复默认颜色。

状态说明 #

• 未滚动：AppBar为默认亮色
• 滚动后：AppBar变暗
• 切换至其他Tab后：AppBar仍保持滚动后的深色状态

已尝试方案 #

设置scrolledUnderElevation: 0和surfaceTintColor: Colors.transparent，但AppBar仍有轻微变暗。

目标效果 #

切换Tab后，AppBar恢复为默认亮色样式。

项目代码示例 #

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

  @override
  State<MyApp> createState() => _MyAppState();
}

int currentIndex = 0;

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter app'),
        ),
        body: IndexedStack(
          index: currentIndex,
          children: [
            ListView.builder(
              itemCount: 10,
              itemBuilder: (ctx, index) {
                return const Placeholder(
                  fallbackHeight: 200,
                );
              },
            ),
            const Center(child: Text('search')),
            const Center(child: Text('user')),
          ],
        ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: currentIndex,
          destinations: const [
            NavigationDestination(icon: Icon(Icons.home), label: 'home'),
            NavigationDestination(icon: Icon(Icons.search), label: 'search'),
            NavigationDestination(icon: Icon(Icons.person), label: 'user'),
          ],
          onDestinationSelected: (index) {
            setState(
              () {
                currentIndex = index;
              },
            );
          },
        ),
      ),
    );
  }
}

问题根源是IndexedStack会保留所有子Widget的状态，包括首页ListView的滚动状态，导致AppBar认为仍有内容在其下方滚动。以下两种方法可解决该问题：

方法一：切换Tab时重置首页滚动位置 #

给首页的ListView添加ScrollController，当切换离开首页时，将滚动位置重置到顶部，让AppBar恢复默认样式：

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

  @override
  State<MyApp> createState() => _MyAppState();
}

int currentIndex = 0;

class _MyAppState extends State<MyApp> {
  final ScrollController _homeScrollController = ScrollController();

  @override
  void dispose() {
    _homeScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter app'),
        ),
        body: IndexedStack(
          index: currentIndex,
          children: [
            ListView.builder(
              controller: _homeScrollController,
              itemCount: 10,
              itemBuilder: (ctx, index) {
                return const Placeholder(
                  fallbackHeight: 200,
                );
              },
            ),
            const Center(child: Text('search')),
            const Center(child: Text('user')),
          ],
        ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: currentIndex,
          destinations: const [
            NavigationDestination(icon: Icon(Icons.home), label: 'home'),
            NavigationDestination(icon: Icon(Icons.search), label: 'search'),
            NavigationDestination(icon: Icon(Icons.person), label: 'user'),
          ],
          onDestinationSelected: (index) {
            if (currentIndex == 0 && index != 0) {
              _homeScrollController.jumpTo(0);
            }
            setState(() {
              currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

方法二：根据当前Tab动态控制AppBar样式 #

无需修改滚动状态，直接通过当前Tab索引，动态设置AppBar的scrolledUnderElevation和surfaceTintColor：

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

  @override
  State<MyApp> createState() => _MyAppState();
}

int currentIndex = 0;

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter app'),
          scrolledUnderElevation: currentIndex == 0 ? null : 0,
          surfaceTintColor: currentIndex == 0 ? null : Colors.transparent,
        ),
        body: IndexedStack(
          index: currentIndex,
          children: [
            ListView.builder(
              itemCount: 10,
              itemBuilder: (ctx, index) {
                return const Placeholder(
                  fallbackHeight: 200,
                );
              },
            ),
            const Center(child: Text('search')),
            const Center(child: Text('user')),
          ],
        ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: currentIndex,
          destinations: const [
            NavigationDestination(icon: Icon(Icons.home), label: 'home'),
            NavigationDestination(icon: Icon(Icons.search), label: 'search'),
            NavigationDestination(icon: Icon(Icons.person), label: 'user'),
          ],
          onDestinationSelected: (index) {
            setState(() {
              currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

方案说明 #

• 方法一适合不需要保留首页滚动位置的场景，重置滚动后AppBar会自然恢复默认样式。
• 方法二更灵活，适合需要保留首页滚动位置的需求，直接通过Tab切换控制AppBar的视觉表现。

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