Flutter clippath error mediquery.of() called with a context that does not contain a mediaquery

Question

it says that my mediaquery.of() error with context is mostly caused by no scaffold or no materialApp yet as you can see my code has either of the two. Plus, I did, too context or this.context.

Nor

cant I display the Colors.red from Containers, if I took the width/height edit, I would able to run it. However; it would only display a plain blank white with an appbar.

Heres my code:

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "UiUx",
        theme: ThemeData(),
        home: Scaffold(
            appBar: AppBar(
              title: Text("UiUx"),
            ),
            body: Container(
              child: ClipPath(
                clipper: MyClipper(),
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  color: Colors.red,
                ),
              ),
            )));
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

Here's the error:

Performing hot reload...
Syncing files to device vivo 1811...

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building MyApp(dirty, state: _MyAppState#9c3a2):
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: MyApp
  dirty
  state: _MyAppState#9c3a2
The relevant error-causing widget was: 
  MyApp file:///D:/Programming/Flutter_Projects/uiuxstudy/lib/main.dart:4:23
When the exception was thrown, this was the stack: 
#0      MediaQuery.of (package:flutter/src/widgets/media_query.dart:813:5)
#1      _MyAppState.build (package:uiuxstudy/main.dart:25:37)
#2      StatefulElement.build (package:flutter/src/widgets/framework.dart:4619:28)
#3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4502:15)
#4      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:11)
...
════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 495 libraries in 438ms.

I'm open for some tips and suggestions. Looking specifically for Minimalistic designs

Answer 1

You've got your Material App in the wrong place, it's throwing that error cause there's no parent widget to draw a context from.

Change your entire code to this:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "UiUx",
        theme: ThemeData(),
        home: Scaffold(
            appBar: AppBar(
              title: Text("UiUx"),
            ),
            body: Builder(
              builder: (context) {
                return Container(
                  child: ClipPath(
                    clipper: MyClipper(),
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: MediaQuery.of(context).size.height,
                      color: Colors.red,
                    ),
                  ),
                );
              }
            )));
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

This should work.