runApp使用有状态的小部件引发异常 [英] runApp throws an exception with stateful widget

问题描述

我是新手，我正在学习在应用程序中添加启动画面，然后转到新页面.我在项目中添加了一个依赖闪屏:因为我是新手，所以我不怎么实现启动画面，当我搜索时，我得到了向项目添加依赖项的解决方案.

I am new to flutter and I was learning to have splashscreen in the app and then go to the new page. I added a dependency splashscreen: to my project. Since I am new I dont how to implement splashscreen and when I searched I got the solution of adding dependency to the project.

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

When I tried running my app I got the below error.

 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

This is my 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

My 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

This is my 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,
      ),
    ),
  );
 }
}

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

Why am I getting this error and how can I resolve this?

谢谢.

推荐答案

您的错误实际上是发生的，因为由于已知的框架问题而导致您没有有效的上下文，并且可能在以后的更新中修复了该错误，因此您实际上需要在您的 runApp()方法中使用一个无状态小部件，然后在无状态 build 方法中返回您的 BMICaculator().

Your error is actually happen because you don’t have a valid context due to a known framework issue that may be fixed in a future update where you actually need to use a Stateless Widget in your runApp() method and then, return your BMICaculator() in the stateless build method.

runApp(MyApp());

class MyApp extends StatelessWidget {

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

} 

此外，您实际上并不需要插件即可将闪屏添加到您的应用中.启动画面"有两种类型:

Also, you don’t actually need a plugin to add a splash screen to your app. There are two types of "splash screens":

1. 通常在按下应用程序图标时，您会短暂看到直到实际加载引擎和第一个屏幕为止的内容；

1. The one you see briefly until the engine and the first screen are actually loaded, usually when the app icon is pressed;

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

A custom splash screen where you may fetch some data from an API or do some operations that are needed actually before the first screen. That plugin is more suitable for this scenario.

我建议您阅读这篇文章，它会逐步进行说明如何在应用程序中添加启动画面(案例1)

I suggest you to read this article that explains step by step how to add a splash screen to your app (case 1)

这篇关于runApp使用有状态的小部件引发异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！