Flutter底部导航栏IconButton无法跳转页面求助

我尝试通过Flutter底部导航栏的图标按钮跳转到其他页面时失败了，且没有任何报错信息。我认为各个页面本身没有问题，因为直接调用导航代码是可以正常跳转的，怀疑是图标按钮的导航逻辑存在问题，恳请帮忙解决。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:united21/screens/loan.dart';

import '../../../common/color_extension.dart';

class MyBottomNavigation extends StatefulWidget {
  @override
  State<MyBottomNavigation> createState() => _MyBottomNavigationState();
}

class _MyBottomNavigationState extends State<MyBottomNavigation> {
  int selectTab = 0;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Stack(
            alignment: Alignment.center,
            children: [
              ColorFiltered(
                colorFilter: const ColorFilter.mode(
                  Colors.black, // Change this color to the desired tint color
                  BlendMode.modulate,
                ),
                child: Image.asset("assets/images/bottom_bar_bg.png"),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectTab = 0;
                        var currentTabView = const LoanScreen();
                      });
                    },
                    icon: Image.asset(
                      "assets/images/home.png",
                      width: 20,
                      height: 20,
                      color:
                          selectTab == 0 ? TColor.redshade500 : TColor.gray30,
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectTab = 1;
                        // ignore: unused_local_variable
                        var currentTabView = const LoanScreen();
                      });
                    },
                    icon: Image.asset(
                      "assets/images/budgets.png",
                      width: 20,
                      height: 20,
                      color:
                          selectTab == 1 ? TColor.redshade500 : TColor.gray30,
                    ),
                  ),
                  const SizedBox(
                    width: 50,
                    height: 50,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectTab = 2;
                        var currentTabView = CalenderView();
                      });
                    },
                    icon: Image.asset(
                      "assets/images/calendar.png",
                      width: 20,
                      height: 20,
                      color:
                          selectTab == 2 ? TColor.redshade500 : TColor.gray30,
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectTab = 3;
                        var currentTabView = CardsView();
                      });
                    },
                    icon: Image.asset(
                      "assets/images/creditcards.png",
                      width: 20,
                      height: 20,
                      color:
                          selectTab == 3 ? TColor.redshade500 : TColor.gray30,
                    ),
                  ),
                ],
              )
            ],
          ),
          InkWell(
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => const LoanScreen()));
            },
            child: Container(
              margin: const EdgeInsets.all(20),
              decoration: BoxDecoration(boxShadow: [
                BoxShadow(
                    color: TColor.secondary.withOpacity(0.25),
                    blurRadius: 10,
                    offset: const Offset(0, 4))
              ], borderRadius: BorderRadius.circular(50)),
              child: CircleAvatar(
                radius: 32,
                backgroundColor: Colors.red.shade900,
                child: IconButton(
                  color: Colors.white,
                  onPressed: () {
                    Navigator.pushNamed(context, LoanScreen.id);
                  },
                  icon: const Icon(
                    Icons.currency_rupee_sharp,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

问题核心 #

底部导航栏的IconButton点击逻辑完全没有触发页面跳转的动作——你只是创建了页面实例（比如var currentTabView = const LoanScreen();），但这个变量只是一个本地临时变量，根本没有通过Flutter的导航API（Navigator相关方法）来推送新页面。而中间的圆形按钮能正常跳转，是因为它调用了Navigator.push或Navigator.pushNamed这些真正触发导航的方法。

修改方案 #

在每个IconButton的onPressed回调里，添加实际的导航代码即可，示例如下：

第一个IconButton（首页图标）修改：

onPressed: () {
  setState(() {
    selectTab = 0;
  });
  // 方法1：使用MaterialPageRoute跳转
  Navigator.push(context, MaterialPageRoute(builder: (context) => const LoanScreen()));
  // 方法2：如果已配置命名路由，可使用pushNamed
  // Navigator.pushNamed(context, LoanScreen.id);
},

第三个IconButton（日历图标）修改：

onPressed: () {
  setState(() {
    selectTab = 2;
  });
  Navigator.push(context, MaterialPageRoute(builder: (context) => CalenderView()));
},

第四个IconButton（卡片图标）修改：

onPressed: () {
  setState(() {
    selectTab = 3;
  });
  Navigator.push(context, MaterialPageRoute(builder: (context) => CardsView()));
},

注意事项 #

1. 确保CalenderView和CardsView已经在文件顶部正确导入；
2. 如果使用命名路由（Navigator.pushNamed），需要在项目的MaterialApp中提前配置好对应的路由映射，比如：

MaterialApp(
  routes: {
    LoanScreen.id: (context) => const LoanScreen(),
    CalenderView.id: (context) => const CalenderView(),
    // ...其他页面路由
  },
);

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