Flutter中BottomNavigationBar不显示问题求助

我在用Flutter开发应用，尝试实现BottomNavigationBar，但运行后导航栏完全看不到。我怀疑这和MyApp类build方法里home属性设置的StreamBuilder有关，以下是我的代码：

import 'package:firebase_app_check/firebase_app_check.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:iinhouse/core/screens/create_account.dart';
import 'package:iinhouse/core/screens/home.dart';
import 'package:iinhouse/core/screens/loader.dart';
import 'package:iinhouse/core/screens/login.dart';
import 'package:iinhouse/core/screens/verify_email.dart';

// Create new screens for the bottom navigation.
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Screen 1'));
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Screen 2'));
  }
}

class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Screen 3'));
  }
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await FirebaseAppCheck.instance.activate();
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'iinhouse',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routes: {
        '/login': (context) => const Login(),
        '/create_account': (context) => const CreateAccountPage(),
        '/verify_email': (context) => const VerifyEmailScreen(),
        '/home': (context) => HomeScreen()
      },
      initialRoute: '/login',
      home: StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Loader();
          }

          if (snapshot.hasData) {
            final user = snapshot.data;
            if (user!.emailVerified) {
              return MyHomePage(); // Use the new wrapper widget
            } else {
              return const VerifyEmailScreen();
            }
          }

          return const Login();
        },
      ),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _screens = <Widget>[
    HomeScreen(), // Ensure HomeScreen is const if possible
    Screen2(),
    Screen3(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            backgroundColor: Colors.white,
            icon: Icon(
              Icons.home,
              color: Colors.black,
            ),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.deepPurple,
        onTap: _onItemTapped,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home Screen'),
      ),
    );
  }
}

问题根源 #

你的HomeScreen本身是一个带Scaffold的Widget，当它作为MyHomePage的body时，相当于嵌套了Scaffold。外层MyHomePage的BottomNavigationBar会被内层HomeScreen的Scaffold覆盖，导致导航栏不可见。

另外你在MaterialApp中同时设置了initialRoute: '/login'和home属性，这会导致冲突——home属性会优先生效，initialRoute的设置会被忽略，但这不是导航栏不显示的直接原因。

修复步骤 #

1. 移除HomeScreen内部的Scaffold：
   将HomeScreen修改为只返回页面内容，避免嵌套Scaffold：

   class HomeScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Center(
         child: Text('Home Screen'),
       );
     }
   }
   

2. 清理路由冲突（可选）：
   MaterialApp中home和initialRoute只能二选一，建议移除initialRoute属性，避免逻辑冲突：

   MaterialApp(
     title: 'iinhouse',
     theme: ThemeData(
       colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
       useMaterial3: true,
     ),
     routes: {
       '/login': (context) => const Login(),
       '/create_account': (context) => const CreateAccountPage(),
       '/verify_email': (context) => const VerifyEmailScreen(),
       '/home': (context) => MyHomePage() // 这里建议指向MyHomePage而非HomeScreen
     },
     home: StreamBuilder(...),
   )
   

3. 验证效果：
   修改后，当用户登录且邮箱验证通过时，MyHomePage的Scaffold会加载HomeScreen作为body，底部导航栏不会被遮挡，能正常显示。

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