使用颤动的网址导航时，底部导航栏消失答案

【问题标题】：Bottom navigation bar disappears while navigating with the url in flutter使用颤动的网址导航时，底部导航栏消失
【发布时间】：2021-06-10 18:24:58
【问题描述】：

当我点击它时，我的导航栏运行良好。当我尝试使用诸如“http://localhost:5000/#/profile”之类的 url 导航到页面时，底部导航栏消失了。我希望我的导航栏留在可以导航的页面中。我想我也应该以某种方式将导航栏添加到个人资料页面，但我找不到它。

const String HomeRoute = '/';
const String ProfileRoute = '/profile';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: DbProvider()),
        ChangeNotifierProvider.value(
          value: ThemeChanger(ThemeData.light()),
        )
      ],
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);
    return MaterialApp(
      initialRoute: HomeRoute,
      routes: {
        HomeRoute: (context) => HomePage(),
        ProfileRoute: (context) => Profile(),
      },
      theme: theme.getTheme(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int menuItem = 0;
  List<Widget> allPages;
  Home home;
  Profile profile;
  Favorites favorites;
  Offers offer;

  FirebaseAuth firebaseAuth = FirebaseAuth.instance;
  User currentUser;
  @override
  void initState() {
    if (mounted) {
      super.initState();
      home = Home();
      profile = Profile();
      favorites = Favorites();
      offer = Offers();
      allPages = [home, offer, favorites, profile];
    }
  }
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: allPages[menuItem],
      bottomNavigationBar: bottomNavMenu(),
    );
  }

  Theme bottomNavMenu() {
    return Theme(
      data: ThemeData(
          canvasColor: Colors.blue.shade900, primaryColor: Colors.orangeAccent),
      child: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Main',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.local_offer),
            label: 'Offer',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_outlined),
            label: 'Favs',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outlined),
            label: 'Profile',
          ),
        ],
        type: BottomNavigationBarType.shifting,
        currentIndex: menuItem,
        onTap: (index) {
          setState(() {
            menuItem = index;
          });
        },
      ),
    );
  }
}


class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile > {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: Center(
        child: Text("Profile),
      ),
    );
  }
}

【问题讨论】：

标签： flutter navigation

【解决方案1】：

Scaffold 中包含底部导航栏。

因此，它只存在于 HomePage 小部件中。如果您希望显示它，您的 ProfilePage > Scaffold 小部件中也应该有一个导航栏。

您可能需要一个控制器来设置所选索引，以便所有“主”小部件都可以访问当前索引（或使用提供程序）。

替代解决方案，您将当前索引与路由一起传递。

【讨论】：