Issue with PersistentBottomNavBar: MediaQuery.of(context)

问题

I have some issues with PersistentBottomNavBar package in my Flutter App. It gives me an error with MediaQuery.of(context) message: 'it called with a context that does not contain a MediaQuery'. I can't imagine what's going on here. Maybe it's because I'm using persistentBottomNavbar inside MultiProvider widget? I've tried to get rid of MultiProvider with MaterialApp widgets and return only PersistentTabView widget as a build widget. But it couldn't help me.

The code I have:

import 'package:provider/provider.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';

import './providers/products.dart';

import './screens/words_list_screen.dart';
import './screens/add_word_screen.dart';
import './screens/profile_screen.dart';

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

  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  PersistentTabController _tabController;
  bool _hideNavBar;

  @override
  void initState() {
    super.initState();
    _tabController = PersistentTabController(initialIndex: 0);
    _hideNavBar = false;
  }

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => Products(),
        ),
      ],
      child: MaterialApp(
        title: 'Sample App',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          accentColor: Colors.grey[700],
          errorColor: Colors.red[400],
          fontFamily: 'Nunito',
          scaffoldBackgroundColor: Colors.white,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: PersistentTabView(
          context,
          controller: _tabController,
          screens: [
            ProductsListScreen(),
            AddProductScreen(),
            ProfileScreen(),
          ],
          items: _navBarItems(),
          confineInSafeArea: true,
          backgroundColor: Colors.white,
          handleAndroidBackButtonPress: true,
          resizeToAvoidBottomInset: true,
          stateManagement: true,
          hideNavigationBarWhenKeyboardShows: true,
          decoration: NavBarDecoration(
            borderRadius: BorderRadius.circular(10.0),
            colorBehindNavBar: Colors.red,
          ),
          popAllScreensOnTapOfSelectedTab: true,
          popActionScreens: PopActionScreensType.all,
          itemAnimationProperties: ItemAnimationProperties(
            duration: Duration(milliseconds: 200),
            curve: Curves.ease,
          ),
          screenTransitionAnimation: ScreenTransitionAnimation(
            animateTabTransition: true,
            curve: Curves.ease,
            duration: Duration(
              milliseconds: 200,
            ),
          ),
          navBarStyle: NavBarStyle.style1,
        ),
        initialRoute: '/',
      ),
    );
  }
}

So in my Android Emulator I have following issues with red screen.

Also in my debug-console in VCode.

回答1:

Remove MaterialApp from MyApp widget and make it the parent Widget of MyApp widget by adding the MaterialApp in your runApp. Your code should look similar to this code below

......
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],
          errorColor: Colors.red[400],
          fontFamily: 'Nunito',
          scaffoldBackgroundColor: Colors.white,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        initialRoute: '/',
        home: MyApp(),
      ),
    ),
  );
}

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

class _MyAppState extends State<MyApp> {
  PersistentTabController _tabController;
  bool _hideNavBar;

  @override
  void initState() {
    super.initState();
    _tabController = PersistentTabController(initialIndex: 0);
    _hideNavBar = false;
  }

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

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,

......

Or you may make a separate Widget just for MaterialApp.

来源：https://stackoverflow.com/questions/65257266/issue-with-persistentbottomnavbar-mediaquery-ofcontext