PersistentBottomNavBar的问题:MediaQuery.of(context) [英] Issue with PersistentBottomNavBar: MediaQuery.of(context)

问题描述

我的Flutter应用程序中的PersistentBottomNavBar软件包存在一些问题.MediaQuery.of(context)消息给我一个错误:它是在不包含MediaQuery的上下文中调用的".我无法想象这里发生了什么.也许是因为我在MultiProvider小部件内使用了persistentBottomNavbar吗?我试图通过MaterialApp小部件摆脱MultiProvider，仅将PersistentTabView小部件作为构建小部件返回.但这无济于事.

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.

我拥有的代码:

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: '/',
      ),
    );
  }
}

因此，在我的Android模拟器中，红屏出现以下问题.

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

也在我的VCode调试控制台中.

Also in my debug-console in VCode.

推荐答案

从MyApp小部件中删除MaterialApp，并通过在您的runApp中添加MaterialApp使其成为MyApp小部件的父小部件.您的代码应类似于下面的代码

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,

......

或者您可以仅为MaterialApp制作一个单独的小部件.

Or you may make a separate Widget just for MaterialApp.

这篇关于PersistentBottomNavBar的问题:MediaQuery.of(context)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！