MediaQuery.of() error when trying to set Background Image in Flutter - ios

Question

This is my code for setting the Background Image of my app.
import 'package:flutter/material.dart';
void main() => runApp(Calculator());
class Calculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/Background_1.jpg"),
fit: BoxFit.cover,
),
),
child: null,
),
);
}
}
And this is the error I am getting when I am trying to run the code!
> I/flutter (10809): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
> ╞═══════════════════════════════════════════════════════════ I/flutter
> (10809): The following assertion was thrown building Calculator:
> I/flutter (10809): MediaQuery.of() called with a context that does not
> contain a MediaQuery. I/flutter (10809): No MediaQuery ancestor could
> be found starting from the context that was passed to MediaQuery.of().
> I/flutter (10809): This can happen because you do not have a
> WidgetsApp or MaterialApp widget (those widgets introduce I/flutter
> (10809): a MediaQuery), or it can happen if the context you use comes
> from a widget above those widgets. I/flutter (10809): The context used
> was: I/flutter (10809): Scaffold(dirty, state:
> ScaffoldState#0495a(lifecycle state: initialized, tickers: tracking 1
> I/flutter (10809): ticker)) I/flutter (10809): I/flutter (10809):
> When the exception was thrown, this was the stack: I/flutter (10809):
> #0 MediaQuery.of (package:flutter/src/widgets/media_query.dart:481:5) I/flutter
> (10809): #1 ScaffoldState.didChangeDependencies
> (package:flutter/src/material/scaffold.dart:1449:50) I/flutter
> (10809): #2 StatefulElement._firstBuild
> (package:flutter/src/widgets/framework.dart:3846:12) I/flutter
> (10809): #3 ComponentElement.mount
> (package:flutter/src/widgets/framework.dart:3696:5) I/flutter (10809):
> #4 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) I/flutter
> (10809): #5 Element.updateChild
> (package:flutter/src/widgets/framework.dart:2753:12) I/flutter
> (10809): #6 ComponentElement.performRebuild
> (package:flutter/src/widgets/framework.dart:3732:16) I/flutter
> (10809): #7 Element.rebuild
> (package:flutter/src/widgets/framework.dart:3547:5) I/flutter (10809):
> #8 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3701:5) I/flutter (10809):
> #9 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3696:5) I/flutter (10809):
> #10 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) I/flutter
> (10809): #11 Element.updateChild
> (package:flutter/src/widgets/framework.dart:2753:12) I/flutter
> (10809): #12 RenderObjectToWidgetElement._rebuild
> (package:flutter/src/widgets/binding.dart:909:16) I/flutter (10809):
> #13 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:880:5) I/flutter (10809):
> #14 RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:826:17) I/flutter
> (10809): #15 BuildOwner.buildScope
> (package:flutter/src/widgets/framework.dart:2266:19) I/flutter
> (10809): #16 RenderObjectToWidgetAdapter.attachToRenderTree
> (package:flutter/src/widgets/binding.dart:825:13) I/flutter (10809):
> #17 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.attachRootWidget
> (package:flutter/src/widgets/binding.dart:712:7) I/flutter (10809):
> #18 runApp (package:flutter/src/widgets/binding.dart:756:7) I/flutter (10809): #19 main (package:calculator/main.dart:3:16)
> I/flutter (10809): #20 _startIsolate.<anonymous closure>
> (dart:isolate/runtime/libisolate_patch.dart:289:19) I/flutter (10809):
> #21 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12) I/flutter (10809):
> ════════════════════════════════════════════════════════════════════════════════════════════════════
In the pubspec.yaml file, I have specified the asset as well with proper indentation, but nothing is of any help!

Answer 1

You need to wrap your Scaffold inside a WidgetsApp widget such as MaterialApp which creates its own MediaQuery:
class Calculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/Background_1.jpg"),
fit: BoxFit.cover,
),
),
child: null,
),
),
);
}
}

Answer 2

This code will give you a responsive background.
get a ref to you screen height and width from the BuildContext
to give your image size simply pass in the dimensions to your container.
I have demonstrated this below.
note* You no longer have to use the new keyword in Dart
import 'package:flutter/material.dart';
void main() => runApp(Calculator());
class Calculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
//take a reference to width and height using the current context
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
return new Scaffold(
body: new Container(
//give the container the size and width
width:width,
height:height,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/Background_1.jpg"),
fit: BoxFit.cover,
),
),
//Don't return null flutter doesn't allow it, You can use empty Container
as a place holder to avoid errors.
child: Container(),
),
);
}
}