I have a dart code that I just imported from the adobe_xd. I am returning. the Scaffold inside Widget build. I'm new in Flutter (studying) and for now I don't understand how to add MediaQuery in order to fix the issue.
Can someone give a clue in how to fix this code?
Here are the error:
═══ Exception caught by widgets library ═══
The following assertion was thrown building MyApp:
MediaQuery.of() called with a context that does not contain a MediaQuery.
No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
The context used was: Scaffold
dirty
state: ScaffoldState#6b9c2(lifecycle state: initialized, tickers: tracking 2 tickers)
The relevant error-causing widget was
...
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞══
The following assertion was thrown building MyApp:
MediaQuery.of() called with a context that does not contain a MediaQuery.
No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
The context used was:
Scaffold
The relevant error-causing widget was:
...
When the exception was thrown, this was the stack
#0 MediaQuery.of package:flutter/…/widgets/media_query.dart:819
#1 ScaffoldState.didChangeDependencies package:flutter/…/material/scaffold.dart:2166
#2 StatefulElement._firstBuild package:flutter/…/widgets/framework.dart:4705
#3 ComponentElement.mount
..
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
And this is the code:
import 'package:flutter/material.dart';
import 'package:adobe_xd/pinned.dart';
import 'package:adobe_xd/blend_mask.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xfff2f2f2),
body: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(286.0, 8.0),
child: SizedBox(
width: 73.0,
height: 14.0,
child: Stack(
children: <Widget>[
Pinned.fromSize(
bounds: Rect.fromLTWH(0.0, 0.0, 73.0, 14.0),
size: Size(73.0, 14.0),
pinRight: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'Right Detail' (group)
Stack(
children: <Widget>[
Pinned.fromSize(
bounds: Rect.fromLTWH(10.5, 0.0, 62.5, 14.0),
size: Size(73.0, 14.0),
pinRight: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'Battery' (group)
Stack(
children: <Widget>[
Pinned.fromSize(
bounds: Rect.fromLTWH(36.0, 1.0, 26.5, 11.5),
size: Size(62.5, 14.0),
pinRight: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'Battery Icon' (group)
Stack(
children: <Widget>[
Pinned.fromSize(
bounds:
Rect.fromLTWH(0.0, 0.0, 24.0, 11.5),
size: Size(26.5, 11.5),
pinLeft: true,
pinRight: true,
pinTop: true,
pinBottom: true,
child:
// Adobe XD layer: 'Battery Outline' (shape)
SvgPicture.string(
_svg_dxasg4,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromSize(
bounds:
Rect.fromLTWH(25.0, 3.6, 1.5, 4.2),
size: Size(26.5, 11.5),
pinRight: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'Battery Connector' (shape)
SvgPicture.string(
_svg_98lv45,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromSize(
bounds:
Rect.fromLTWH(2.0, 2.0, 20.0, 7.5),
size: Size(26.5, 11.5),
pinLeft: true,
pinTop: true,
pinBottom: true,
fixedWidth: true,
child:
// Adobe XD layer: 'Battery Fill' (shape)
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(1.0),
color: const Color(0xff7c7c7c),
),
),
),
],
),
),
Pinned.fromSize(
bounds: Rect.fromLTWH(0.0, 0.0, 33.0, 14.0),
size: Size(62.5, 14.0),
pinRight: true,
child:
// Adobe XD layer: '100%' (text)
Text(
'100%',
style: TextStyle(
fontFamily: 'SF Pro Text',
fontSize: 12,
color: const Color(0xff7c7c7c),
),
textAlign: TextAlign.right,
),
),
],
),
),
Pinned.fromSize(
bounds: Rect.fromLTWH(0.0, 0.5, 7.0, 12.0),
size: Size(73.0, 14.0),
pinRight: true,
fixedWidth: true,
fixedHeight: true,
child:
// Adobe XD layer: 'bluetooth' (shape)
SvgPicture.string(
_svg_ehw6vn,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
],
),
),
],
),
),
)
],
),
);
}
}
const String _svg_dxasg4 =
'<svg viewBox="0.0 0.5 24.0 11.5" ><path transform="translate(0.0, 0.5)" d="M 0 2.5 C 0 1.119288086891174 1.119288086891174 0 2.5 0 L 21.5 0 C 22.88071250915527 0 24 1.119288086891174 24 2.5 L 24 9 C 24 10.38071155548096 22.88071250915527 11.5 21.5 11.5 L 20.14764022827148 11.5 L 0 11.5 L 2.5 11.5 C 1.119288086891174 11.5 0 10.38071155548096 0 9 L 0 2.5 Z" fill="none" fill-opacity="0.47" stroke="#000000" stroke-width="1" stroke-opacity="0.47" stroke-miterlimit="10" stroke-linecap="butt" /></svg>';
const String _svg_98lv45 =
'<svg viewBox="25.0 4.1 1.5 4.2" ><path transform="translate(25.0, 4.13)" d="M 0 0.000204105643206276 C 0.8737806677818298 0.3090051710605621 1.500300049781799 1.142308712005615 1.500300049781799 2.122200012207031 C 1.500300049781799 3.101381778717041 0.8737806677818298 3.935094356536865 0 4.244100570678711 L 0 0.000204105643206276 Z" fill="#7c7c7c" fill-opacity="0.58" stroke="none" stroke-width="1" stroke-opacity="0.58" stroke-miterlimit="10" stroke-linecap="butt" /></svg>';
const String _svg_ehw6vn =
'<svg viewBox="0.5 1.0 7.0 12.0" ><path transform="translate(0.5, 1.0)" d="M 2.999705076217651 11.99970054626465 L 2.999705076217651 11.99790000915527 L 2.999705076217651 7.248600482940674 L 0.7497051954269409 9.500400543212891 L 5.169753876543837e-06 8.749800682067871 L 2.750395059585571 6.000300407409668 L 5.169753876543837e-06 3.249900341033936 L 0.7497051954269409 2.500200271606445 L 2.999695062637329 4.750200271606445 L 2.999705076217651 2.731323149873788e-07 L 7.000205039978027 3.500100374221802 L 4.249804973602295 5.99940013885498 L 7.000205039978027 8.499600410461426 L 3.001505136489868 11.99790000915527 L 2.999705076217651 11.99970054626465 Z M 4.000494956970215 7.000176906585693 L 4.000494956970215 7.000200271606445 L 3.999605178833008 9.749700546264648 L 5.499905109405518 8.459100723266602 L 4.000504970550537 7.000200271606445 L 4.000494956970215 7.000176906585693 Z M 3.999605178833008 2.369700193405151 L 3.999605178833008 5.000400066375732 L 5.499905109405518 3.600000381469727 L 3.999605178833008 2.369700193405151 Z" fill="#7c7c7c" stroke="none" stroke-width="1" stroke-miterlimit="10" stroke-linecap="butt" /></svg>';
You need to wrap your scaffold with a material app, like this
...
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
....
home: Scaffold(
backgroundColor: const Color(0xfff2f2f2),
body: Stack(
children: <Widget>[
... // rest of your code
]
),
);
}
}