尝试在Flutter中设置背景图片时出现MediaQuery.of（）错误

Question

这是我用于设置应用程序背景图像的代码。

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

这是我在尝试运行代码时遇到的错误！

  

I / flutter（10809）：══╡小工具库引起的异常
  ╞═════════════════════════════════════════════════ ══════════我/扑   （10809）：以下断言被引发构建计算器：   I / flutter（10809）：MediaQuery.of（）调用的上下文没有   包含MediaQuery。 I / flutter（10809）：没有MediaQuery祖先   从传递给MediaQuery.of（）的上下文开始找到。   I / flutter（10809）：之所以会发生这种情况，是因为您没有   WidgetsApp或MaterialApp小部件（这些小部件介绍I / flutter   （10809）：MediaQuery），否则，如果您使用的上下文出现   来自那些小部件上方的小部件。 I / flutter（10809）：使用的上下文   是：I / flutter（10809）：脚手架（脏，状态：   ScaffoldState＃0495a（生命周期状态：已初始化，报价器：跟踪1   I / flutter（10809）：股票行情指示器））I / flutter（10809）：I / flutter（10809）：   引发异常时，这是堆栈：I / flutter（10809）：

     

0 MediaQuery.of（package：flutter / src / widgets / media_query.dart：481：5）I / flutter

     

（10809）：＃1 ScaffoldState.didChangeDependencies   （包装：flutter / src / material / scaffold.dart：1449：50）I / flutter   （10809）：＃2 StatefulElement._firstBuild   （包：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   （包：flutter / src / widgets / framework.dart：2753：12）I / flutter   （10809）：＃6 ComponentElement.performRebuild   （包：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（包：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   （包：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（包：flutter / src / widgets / binding.dart：880：5）I / flutter（10809）：

     

14 RenderObjectToWidgetAdapter.attachToRenderTree。 （package：flutter / src / widgets / binding.dart：826：17）I / flutter

     

（10809）：＃15 BuildOwner.buildScope   （包：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。   （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）：

     

═══════════════════════════════════════════════ ══════════════════════════════════════════════════ ═══

在pubspec.yaml文件中，我还指定了资产并带有适当的缩进，但是没有任何帮助！

Answer 1

您需要将Scaffold包装在MaterialApp之类的-Split operator小部件中，该小部件会创建自己的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

此代码将为您提供快速响应的背景。 从BuildContext获取对您的屏幕高度和宽度的引用 只需将尺寸传递给容器即可。

我已经在下面演示了这一点。

注意*您不再需要在Dart中使用new关键字

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