Flutter中Persistent Bottom Nav Bar使用报错求助

我是Flutter新手，想要添加一个包含4个图标的Persistent Bottom Nav Bar（版本4.0.2），默认第一个图标对应首页，可跳转至3个不同页面。构建应用时出现了关于WidgetsBinding的空安全警告，以下是相关代码及报错信息：

Home Screen 代码 #

import 'package:flutter/material.dart';
import 'package:myspace/widgets/right_drawer.dart';
import 'package:myspace/widgets/bottom_navigation_bar.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';


class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        title: Text(
          'mySpace',
          style: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
            color: Colors.blue.shade900
          ),
        ),
        actions: [
          Builder(
            builder: (context) => IconButton(
                onPressed: () => Scaffold.of(context).openEndDrawer(),
                icon: Icon(Icons.account_circle, color: Colors.blue.shade900, size: 30.0,)
            ),
          ),
        ],
      ),
      endDrawer: const RightDrawerWidget(),
      bottomNavigationBar: BottomListWidget(),
    );
  }
}

Bottom Navigation Bar 代码 #

import 'package:flutter/material.dart';
import 'package:myspace/Screens/homescreen.dart';
import 'package:myspace/Screens/chat_system.dart';
import 'package:myspace/Screens/help_and_support.dart';
import 'package:myspace/Screens/news.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';

class BottomListWidget extends StatefulWidget {
  const BottomListWidget({Key? key}) : super(key: key);

  @override
  State<BottomListWidget> createState() => _BottomListWidgetState();
}

class _BottomListWidgetState extends State<BottomListWidget> {

  PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
      items: _navBarItems(),
      confineInSafeArea: true,
      itemAnimationProperties: const ItemAnimationProperties(
        duration: Duration(milliseconds: 200),
        curve: Curves.ease,
      ),
      screenTransitionAnimation: const ScreenTransitionAnimation(
        duration: Duration(milliseconds: 200),
        curve: Curves.ease,
        animateTabTransition: true
      ),
      navBarStyle: NavBarStyle.style10,
    );
  }
}

List<PersistentBottomNavBarItem> _navBarItems() {
  return [
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.home),
      title: ('Home'),
      activeColorPrimary: Colors.blue.shade800,
      inactiveColorPrimary: Colors.grey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.newspaper_sharp),
      title: ('Happenings'),
      activeColorPrimary: Colors.blue.shade800,
      inactiveColorPrimary: Colors.grey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.support_agent_rounded),
      title: ('Help'),
      activeColorPrimary: Colors.blue.shade800,
      inactiveColorPrimary: Colors.grey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.message),
      title: ('Chats'),
      activeColorPrimary: Colors.blue.shade800,
      inactiveColorPrimary: Colors.grey,
    ),
  ];
 }

 List<Widget> _buildScreens() {
  return [
    const HomeScreen(),
    const RecentNewsScreen(),
    const HelpAndSupport(),
    const ChatSystem()
  ];
 }

构建警告信息 #

Launching lib\main.dart on EB2101 in debug mode...
Running Gradle task 'assembleDebug'...
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/persistent-tab-view.widget.dart:368:22: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
      WidgetsBinding.instance!.addPostFrameCallback((_) {
                     ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/animations/animations.dart:55:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-6-bottom-nav-bar.widget.dart:44:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-8-bottom-nav-bar.widget.dart:44:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-11-bottom-nav-bar.widget.dart:46:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-12-bottom-nav-bar.widget.dart:46:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-13-bottom-nav-bar.widget.dart:46:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^
/E:/flutter/.pub-cache/hosted/pub.dartlang.org/persistent_bottom_nav_bar-4.0.2/lib/nav-bar-styles/style-14-bottom-nav-bar.widget.dart:46:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/E:/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {
                   ^

解决方法 #

1. 核心警告修复 #

这些警告是因为persistent_bottom_nav_bar:4.0.2版本适配的Flutter版本较低，而你当前使用的Flutter版本中WidgetsBinding.instance已被标记为非空类型，无需再用!空断言操作符。

最直接的解决方式是升级依赖包：

• 在pubspec.yaml中，将persistent_bottom_nav_bar的版本改为最新稳定版，执行flutter pub upgrade persistent_bottom_nav_bar完成升级，新版本已修复该适配问题。

如果暂时无法升级，可临时通过依赖覆盖忽略警告（不推荐长期使用）：

dependency_overrides:
  persistent_bottom_nav_bar:
    git:
      url: https://github.com/BilalShahid13/PersistentBottomNavBar.git
      ref: master

2. 代码逻辑修复 #

你的代码存在无限嵌套问题：HomeScreen中嵌套了BottomListWidget，而BottomListWidget的_buildScreens又返回HomeScreen，运行时会触发栈溢出错误。

需要拆分页面结构：

• 创建一个MainContainerScreen作为底部导航的容器，不包含底部导航组件
• 将原HomeScreen改为仅展示首页内容的页面，移除bottomNavigationBar: BottomListWidget()
• 修改BottomListWidget的_buildScreens：

List<Widget> _buildScreens() {
  return [
    const HomeScreen(), // 仅展示首页内容，无底部导航
    const RecentNewsScreen(),
    const HelpAndSupport(),
    const ChatSystem()
  ];
 }

• 在main.dart中启动MainContainerScreen，其内部包含BottomListWidget

内容的提问来源于stack exchange，提问作者Sanjay Kumar Parida