PersistentBottomNavBar 的问题：MediaQuery.of(context)

Question

我的 Flutter 应用程序中的 PersistentBottomNavBar 包存在一些问题。它给了我一个 MediaQuery.of(context) 消息的错误：“它使用不包含 MediaQuery 的上下文调用”。我无法想象这里发生了什么。也许是因为我在 MultiProvider 小部件中使用了 persistentBottomNavbar？我试图用 MaterialApp 小部件摆脱 MultiProvider 并仅返回 PersistentTabView 小部件作为构建小部件。但它帮不了我。

我的代码：

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 模拟器中，我遇到了以下红屏问题。

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

Answer 1

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

......
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 制作一个单独的 Widget。