runApp throws an exception with stateful widget

Question

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))

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

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

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?

Thanks in advance.

Answer 1

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. The one you see briefly until the engine and the first screen are actually loaded, usually when the app icon is pressed;

2. 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.

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