Fatal编程技术网
  • android/
  • Android 使用不包含MediaQuery的上下文调用MediaQuery.of（）。错误

Android 使用不包含MediaQuery的上下文调用MediaQuery.of（）。错误

android ios flutter dart

Android 使用不包含MediaQuery的上下文调用MediaQuery.of（）。错误,android,ios,flutter,dart,Android,Ios,Flutter,Dart,我正试图在互联网的帮助下制作一个应用程序。该应用程序正在从图库拍摄照片，并将其发送到我的服务器。当我准备好代码时，出现了一个错误 I/flutter (11233): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (11233): The following assertion was thrown building Up

我正试图在互联网的帮助下制作一个应用程序。该应用程序正在从图库拍摄照片，并将其发送到我的服务器。当我准备好代码时，出现了一个错误

I/flutter (11233): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (11233): The following assertion was thrown building UploadImageDemo(dirty, state:
I/flutter (11233): UploadImageDemoState#e27ba):
I/flutter (11233): MediaQuery.of() called with a context that does not contain a MediaQuery.
I/flutter (11233): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
I/flutter (11233): This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
I/flutter (11233): a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
I/flutter (11233): The context used was:
I/flutter (11233):   UploadImageDemo
这意味着没有MediaQuery。这是我的密码

import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

void main()
{
  runApp(UploadImageDemo());
}

class UploadImageDemo extends StatefulWidget {

  UploadImageDemo() : super();

  final String title = "Upload Image Demo";

  @override
  UploadImageDemoState createState() => UploadImageDemoState();
}

class UploadImageDemoState extends State<UploadImageDemo> {

  //
  static final String uploadEndPoint =
      'http://localhost/flutter_test/upload_image.php';
  Future<File> file;
  String status = '';
  String base64Image;
  File tmpFile;
  String errMessage = 'Error Uploading Image';

  chooseImage() {
    setState(() {
      file = ImagePicker.pickImage(source: ImageSource.gallery);
    });
    setStatus('');
  }

  setStatus(String message) {
    setState(() {
      status = message;
    });
  }

  startUpload() {
    setStatus('Uploading Image...');
    if (null == tmpFile) {
      setStatus(errMessage);
      return;
    }
    String fileName = tmpFile.path.split('/').last;
    upload(fileName);
  }

  upload(String fileName) {
    http.post(uploadEndPoint, body: {
      "image": base64Image,
      "name": fileName,
    }).then((result) {
      setStatus(result.statusCode == 200 ? result.body : errMessage);
    }).catchError((error) {
      setStatus(error);
    });
  }

  Widget showImage() {

    return FutureBuilder<File>(
      future: file,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            null != snapshot.data) {
          tmpFile = snapshot.data;
          base64Image = base64Encode(snapshot.data.readAsBytesSync());
          return Flexible(
            child: Image.file(
              snapshot.data,
              fit: BoxFit.fill,
            ),
          );
        } else if (null != snapshot.error) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text("Upload Image Demo"),
      ),
      body: Container(
        padding: EdgeInsets.all(30.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            OutlineButton(
              onPressed: chooseImage,
              child: Text('Choose Image'),
            ),
            SizedBox(
              height: 20.0,
            ),
            showImage(),
            SizedBox(
              height: 20.0,
            ),
            OutlineButton(
              onPressed: startUpload,
              child: Text('Upload Image'),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              status,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.w500,
                fontSize: 20.0,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“dart:io”；
导入“dart:convert”；
将“package:http/http.dart”导入为http；
导入“包：image_picker/image_picker.dart”；
void main（）
{
runApp（UploadImageDemo（））；
}
类UploadImageDemo扩展StatefulWidget{
UploadImageDemo（）：super（）；
最终字符串title=“上传图像演示”；
@凌驾
UploadImageDemoState createState（）=>UploadImageDemoState（）；
}
类UploadImageDemoState扩展状态{
//
静态最终字符串上载端点=
'http://localhost/flutter_test/upload_image.php';
未来档案；
字符串状态=“”；
字符串基图像；
文件tmpFile；
字符串errMessage='上传图像时出错'；
选择图像（）{
设置状态（）{
file=ImagePicker.pickImage（来源：ImageSource.gallery）；
});
设置状态（“”）；
}
设置状态（字符串消息）{
设置状态（）{
状态=消息；
});
}
startUpload（）{
setStatus（'上传图像…'）；
if（null==tmpFile）{
设置状态（错误消息）；
返回；
}
字符串fileName=tmpFile.path.split（'/'）.last；
上传（文件名）；
}
上载（字符串文件名）{
http.post（uploadEndPoint，正文：{
“图像”：base64Image，
“名称”：文件名，
}).然后（（结果）{
设置状态（result.statusCode==200？result.body:errMessage）；
}).catchError（（错误）{
设置状态（错误）；
});
}
Widget showImage（）{
回归未来建设者(
未来：文件，
生成器：（BuildContext上下文，异步快照）{
如果（snapshot.connectionState==connectionState.done&&
null！=快照。数据）{
tmpFile=snapshot.data；
base64Image=base64Encode（snapshot.data.readAsBytesSync（））；
回程灵活(
子：Image.file(
快照数据，
fit:BoxFit.fill，
),
);
}else if（null！=快照.错误）{
返回常量文本(
“拾取图像时出错”，
textAlign:textAlign.center，
);
}否则{
返回常量文本(
“未选择图像”，
textAlign:textAlign.center，
);
}
},
);
}
@凌驾
小部件构建（构建上下文）{
最终大小=MediaQuery.of（context）.size；
返回脚手架(
appBar:appBar(
标题：文本（“上传图像演示”），
),
主体：容器(
填充：所有边缘设置（30.0），
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
大纲按钮(
按下：选择图像，
子项：文本（“选择图像”），
),
大小盒子(
身高：20.0，
),
showImage（），
大小盒子(
身高：20.0，
),
大纲按钮(
onPressed:startupboad，
子项：文本（“上载图像”），
),
大小盒子(
身高：20.0，
),
正文(
地位
textAlign:textAlign.center，
样式：TextStyle(
颜色：颜色。绿色，
fontWeight:fontWeight.w500，
字体大小：20.0，
),
),
大小盒子(
身高：20.0，
),
],
),
),
);
}
}
我不知道如何解决这个问题，因为这个MediaQuery对我来说是新的。如何修复此错误？

您需要提供
MaterialApp
，您可以将
MaterialApp
放在
上传图像演示

代码片段


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Upload Image Demo',
      theme: ThemeData(       
        primarySwatch: Colors.blue,       
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: UploadImageDemo(),
    );
  }
}


工作演示



完整代码


import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Upload Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: UploadImageDemo(),
    );
  }
}

class UploadImageDemo extends StatefulWidget {
  UploadImageDemo() : super();

  final String title = "Upload Image Demo";

  @override
  UploadImageDemoState createState() => UploadImageDemoState();
}

class UploadImageDemoState extends State<UploadImageDemo> {
  //
  static final String uploadEndPoint =
      'http://localhost/flutter_test/upload_image.php';
  Future<File> file;
  String status = '';
  String base64Image;
  File tmpFile;
  String errMessage = 'Error Uploading Image';

  chooseImage() {
    setState(() {
      file = ImagePicker.pickImage(source: ImageSource.gallery);
    });
    setStatus('');
  }

  setStatus(String message) {
    setState(() {
      status = message;
    });
  }

  startUpload() {
    setStatus('Uploading Image...');
    if (null == tmpFile) {
      setStatus(errMessage);
      return;
    }
    String fileName = tmpFile.path.split('/').last;
    upload(fileName);
  }

  upload(String fileName) {
    http.post(uploadEndPoint, body: {
      "image": base64Image,
      "name": fileName,
    }).then((result) {
      setStatus(result.statusCode == 200 ? result.body : errMessage);
    }).catchError((error) {
      setStatus(error);
    });
  }

  Widget showImage() {
    return FutureBuilder<File>(
      future: file,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            null != snapshot.data) {
          tmpFile = snapshot.data;
          base64Image = base64Encode(snapshot.data.readAsBytesSync());
          return Flexible(
            child: Image.file(
              snapshot.data,
              fit: BoxFit.fill,
            ),
          );
        } else if (null != snapshot.error) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    print(size);
    return Scaffold(
      appBar: AppBar(
        title: Text("Upload Image Demo"),
      ),
      body: Container(
        padding: EdgeInsets.all(30.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            OutlineButton(
              onPressed: chooseImage,
              child: Text('Choose Image'),
            ),
            SizedBox(
              height: 20.0,
            ),
            showImage(),
            SizedBox(
              height: 20.0,
            ),
            OutlineButton(
              onPressed: startUpload,
              child: Text('Upload Image'),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              status,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.w500,
                fontSize: 20.0,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}



导入“包装：颤振/材料.省道”；
导入“dart:io”；
导入“dart:convert”；
将“package:http/http.dart”导入为http；
导入“包：image_picker/image_picker.dart”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“上传图像演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：上载ImageDemo（），
);
}
}
类UploadImageDemo扩展StatefulWidget{
UploadImageDemo（）：super（）；
最终字符串title=“上传图像演示”；
@凌驾
UploadImageDemoState createState（）=>UploadImageDemoState（）；
}
类UploadImageDemoState扩展状态{
//
静态最终字符串上载端点=
'http://localhost/flutter_test/upload_image.php';
未来档案；
字符串状态=“”；
字符串基图像；
文件tmpFile；
字符串errMessage='上传图像时出错'；
选择图像（）{
设置状态（）{
file=ImagePicker.pickImage（来源：ImageSource.gallery）；
});
设置状态（“”）；
}
设置状态（字符串消息）{
设置状态（）{
状态=消息；
});
}
startUpload（）{
setStatus（'上传图像…'）；
if（null==tmpFile）{
设置状态（错误消息）；
返回；
}
字符串fileName=tmpFile.path.split（'/'）.last；
上传（文件名）；
}
上载（字符串文件名）{
http.post（uploadEndPoint，正文：{
“图像”：base64Image，
“名称”：文件名，
}).然后（（结果）{
设置状态（result.statusCode==200？result.body:errMessage）；
}).catchError（（错误）{
设置状态（错误）；
});
}
Widget showImage（）{
回归未来建设者(
未来：文件，
生成器：（BuildContext上下文，异步快照）{
如果（snapshot.connectionState==connectionState.done&&
null！=快照。数据）{
TMP文件=