runApp 使用有状态小部件引发异常

Question

我是 Flutter 的新手，我正在学习在应用程序中设置启动画面，然后转到新页面。我添加了一个依赖闪屏：到我的项目中。由于我是新手，我不知道如何实现启动画面，当我搜索时，我得到了向项目添加依赖项的解决方案。

当我尝试运行我的应用时，出现以下错误。

 I/flutter (28504): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY 
 ╞═══════════════════════════════════════════════════════════
 I/flutter (28504): The following assertion was thrown building 
 SplashScreen(state: _SplashScreenState#6edd2):
 I/flutter (28504): MediaQuery.of() called with a context that does not 
 contain a MediaQuery.
 I/flutter (28504): No MediaQuery ancestor could be found starting from the 
 context that was passed to MediaQuery.of().
 I/flutter (28504): This can happen because you do not have a WidgetsApp or 
 MaterialApp widget (those widgets introduce
 I/flutter (28504): a MediaQuery), or it can happen if the context you use 
 comes from a widget above those widgets.
 I/flutter (28504): The context used was:
 I/flutter (28504):   Scaffold(dirty, state: ScaffoldState#a8879(lifecycle 
 state: initialized, tickers: tracking 1
 I/flutter (28504):   ticker))

这是我的 pubspec.yaml

name: bmi_calculator
description: A flutter application for knowing you BMI.

version: 1.0.0+1

environment:
   sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  splashscreen:
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
    uses-material-design: true

我的 main.dart

 import 'package:flutter/material.dart';
 import 'package:splashscreen/splashscreen.dart';
 import 'package:bmi_calculator/BmiPage.dart';

 main(){
     runApp(BmiCalculator());
 }
 class BmiCalculator extends StatefulWidget{
    @override
    State<StatefulWidget> createState() {
       return BmiCalculatorstate();
    }
 }
 class BmiCalculatorstate extends State<BmiCalculator>{
     @override
     Widget build(BuildContext context) {
         return new SplashScreen(
            seconds: 10,
            navigateAfterSeconds: new BmiPage(),
            title: Text("Welcome to BMI CALCULATOR",
               style: new TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 10.0,
                  color: Colors.white
               ),
            ),
           backgroundColor: Colors.red,
       );
    }
 }

这是我的 BmiPage.dart

 import 'package:flutter/material.dart';

 class BmiPage extends StatefulWidget{
    @override
    State<StatefulWidget> createState() {
       return BmiPageState();
    }
 }
 class BmiPageState extends State<BmiPage>{
     @override
     Widget build(BuildContext context) {
         return MaterialApp(
           home: Scaffold(
             appBar: new AppBar(
                title: Text(
                  'BMI CALCULATOR',
                   style: new TextStyle(
                   color: Colors.white
             ),
         ),
         backgroundColor: Colors.red,
      ),
    ),
  );
 }
}

为什么会出现此错误，我该如何解决？

提前致谢。

Answer 1

您的错误实际上是因为您没有有效的上下文，因为已知的框架问题可能会在未来的更新中得到修复，您实际上需要在 runApp() 方法中使用无状态小部件，然后返回你的BMICaculator() 在无状态的build 方法中。

runApp(MyApp());

class MyApp extends StatelessWidget {

void build(BuildContext context)=> MaterialApp(home: BMICalculator());

} 

此外，您实际上并不需要插件来为您的应用添加启动画面。 “闪屏”有两种类型：

1. 在引擎和第一个屏幕实际加载之前您会短暂看到的那个，通常是在按下应用图标时；

2. 一个自定义启动屏幕，您可以在其中从 API 获取一些数据或在第一个屏幕之前执行一些实际需要的操作。该插件更适合这种情况。

我建议您阅读this article，它逐步解释了如何向您的应用添加启动画面（案例 1）