时间戳

首页 > 解决方案 > runApp 使用有状态小部件引发异常

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

问题描述

我是 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,
      ),
    ),
  );
 }
}

为什么我会收到此错误，我该如何解决？

提前致谢。

标签： dartflutter

解决方案

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

runApp(MyApp());

class MyApp extends StatelessWidget {

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

}

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

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

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

我建议您阅读这篇文章，逐步解释如何向您的应用添加启动画面（案例 1）

推荐阅读