使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。 如何修复此 dart 代码？

Question

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>';

Answer 1

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