[FLUTTER]：PersistentBottomNavBar 包有问题答案

【问题标题】：[FLUTTER]: Something is wrong with PersistentBottomNavBar package[FLUTTER]：PersistentBottomNavBar 包有问题
【发布时间】：2021-03-24 11:26:21
【问题描述】：

我有另一个 issue before 在我的颤振应用程序中使用 'Provider' 包和 'PersistentBottomNavBar' 包。所以在解决了这个问题后，我立即得到了另一个。有我的源代码。当我运行这段代码时，我的 Android 模拟器崩溃了。带有以下错误消息： 在 null 上调用了方法“map”。接收方：空。尝试调用：map(Closure: (PersistentBottomNavBarItem) => Flexible)

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';

import './screens/products_list_screen.dart';
import './screens/add_product_screen.dart';
import './screens/profile_screen.dart';

import './providers/products.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => Products(),
        ),
      ],
      child: MaterialApp(
        title: 'Sample App',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          accentColor: Colors.grey[700],
        ),
        home: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PersistentTabController _tabController =
      PersistentTabController(initialIndex: 0);
  bool _hideNavBar = false;

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  List<Widget> _buildScreens() {
    return [ProductsListScreen(), AddProductScreen(), ProfileScreen()];
  }

  List<PersistentBottomNavBarItem> _navBarItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.list_bullet),
        title: 'Products',
        activeColor: CupertinoColors.activeBlue,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.add),
        title: 'Add',
        activeColor: CupertinoColors.activeBlue,
        inactiveColor: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.profile_circled),
        title: 'Profile',
        activeColor: CupertinoColors.activeBlue,
        inactiveColor: CupertinoColors.systemGrey,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: _tabController,
      screens: _buildScreens(),
      items: _navBarItems(),
    );
  }
}

我的安卓模拟器有错误：

我的 VCode 中的 Debug 控制台错误：

【问题讨论】：

标签： android flutter dart android-emulator

【解决方案1】：

问题似乎是您没有将 navBarStyle 传递给 PersistentTabView。有多种 NavBarStyle 可供选择，并且每个都有所需的其他值。有关详细信息，请参阅“persistent_bottom_nav_bar”文档。请对您的代码进行以下更改并检查。注意 NavBarStyle.style7 可能不是您要找的 navBarStyle，所以请尝试其他。

.....
return Scaffold(
  body: PersistentTabView(
    context,
    controller: _tabController,
    screens: _buildScreens(),
    items: _navBarsItems(),
    navBarStyle: NavBarStyle.style7,
  ),
....

【讨论】：