This gist contain mediaQuery properties to access in the stateless widget in flutter which is usually you have to write full syntex but with this is easily accessible. it's usually an extention on BuildContext. Work is still in progress

responsive.dart

import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';

extension Responsive on BuildContext {
  
  
  // width = yourDeviceWidth, height = yourDeviceHeight
  
  
  Size get size => MediaQuery.of(this).size;
  double get width => MediaQuery.of(this).size.width;
  double get height => MediaQuery.of(this).size.height;
  EdgeInsets get padding => MediaQuery.of(this).padding;
  double get leftPadding => MediaQuery.of(this).padding.left;
  double get rightPadding => MediaQuery.of(this).padding.right;
  double get topPadding => MediaQuery.of(this).padding.top;
  double get bottomPadding => MediaQuery.of(this).padding.bottom;
  double get devicePixelRatio => MediaQuery.of(this).devicePixelRatio;
  double get textScaleFactor => MediaQuery.of(this).textScaleFactor;
  bool get boldText => MediaQuery.of(this).boldText;
  bool get accessibleNavigation => MediaQuery.of(this).accessibleNavigation;
  bool get alwaysUse24HourFormat => MediaQuery.of(this).alwaysUse24HourFormat;
  bool get disableAnimations => MediaQuery.of(this).disableAnimations;
  bool get highContrast => MediaQuery.of(this).highContrast;
  EdgeInsets get viewPadding => MediaQuery.of(this).viewPadding;
  EdgeInsets get viewInsets => MediaQuery.of(this).viewInsets;
  bool get invertColors => MediaQuery.of(this).invertColors;
  Brightness get platformBrightness => MediaQuery.of(this).platformBrightness;
  Orientation get orientation => MediaQuery.of(this).orientation;
  EdgeInsets get systemGestureInsets => MediaQuery.of(this).systemGestureInsets;
  DeviceGestureSettings get gestureSettings =>
      MediaQuery.of(this).gestureSettings;
  List<DisplayFeature> get displayFeatures =>
      MediaQuery.of(this).displayFeatures;
  NavigationMode get navigationMode => MediaQuery.of(this).navigationMode;
  int get hashCodeValue => MediaQuery.of(this).hashCode;
  MediaQueryData get removePadding => MediaQuery.of(this).removePadding(
      removeLeft: true, removeBottom: true, removeRight: true, removeTop: true);
  MediaQueryData get removeViewPadding => MediaQuery.of(this).removeViewPadding(
      removeLeft: true, removeBottom: true, removeRight: true, removeTop: true);
  MediaQueryData get removeViewInsets => MediaQuery.of(this).removeViewInsets(
      removeLeft: true, removeBottom: true, removeRight: true, removeTop: true);
}





// Real way to make responsive flutter app
// Using MediaQuery


import 'package:flutter/widgets.dart';

@immutable
class Responsive {
// Device Height = 875.428
// Device Width = 411.428
  final BuildContext context;
  final double deviceHeight;
  final double deviceWidth;

  const Responsive({
    required this.context,
    required this.deviceHeight,
    required this.deviceWidth,
  });

  Size get size => MediaQuery.of(context).size;

  double getWidth({required double width}) {
    return MediaQuery.of(context).size.width / (deviceWidth / width);
  }

  double getHeight({required double height}) {
    return MediaQuery.of(context).size.height / (deviceHeight / height);
  }

  double getFontSize({required double fontSize}) {
    return MediaQuery.of(context).size.width / (deviceWidth / fontSize);
  }

  double getTextScaleFactor({required double textScaleFactor}) {
    return MediaQuery.of(context).textScaleFactor / textScaleFactor;
  }

  MediaQueryData removeAllPadding() => MediaQuery.of(context).removePadding(
      removeLeft: true, removeRight: true, removeBottom: true, removeTop: true);

  double getDevicePixelRatio() => MediaQuery.of(context).devicePixelRatio;

  double getBottomPadding({required double padding}) {
    return MediaQuery.of(context).padding.bottom + padding;
  }

  double getLeftPadding({required double padding}) {
    return MediaQuery.of(context).padding.left + padding;
  }

  double getRightPadding({required double padding}) {
    return MediaQuery.of(context).padding.right + padding;
  }

  double getTopPadding({required double padding}) {
    return MediaQuery.of(context).padding.top + padding - 20;
  }
}



// Example

import 'package:flutter/material.dart';
import 'package:use_me_daddy/constants.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final responsive = Responsive(
      context: context,
      deviceHeight: 875.428,
      deviceWidth: 411.428,
    );
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Container(
              width: 300,
              // height: 200,
              height: responsive.getHeight(height: 200),
              color: Colors.red[500]!,
            ),
          ),
          SizedBox(
            height: responsive.getHeight(height: 50),
          ),
          Container(
            // width: responsive.getWidth(width: 80),
            // height: responsive.getHeight(height: 80),
            padding: EdgeInsets.only(
              left: responsive.getLeftPadding(padding: 20),
              right: responsive.getRightPadding(padding: 20),
              top: responsive.getTopPadding(padding: 20),
              bottom: responsive.getBottomPadding(padding: 20),
            ),
            // margin: EdgeInsets.only(
            //   left: responsive.getLeftPadding(padding: 20),
            //   right: responsive.getRightPadding(padding: 20),
            //   top: responsive.getTopPadding(padding: 20),
            //   bottom: responsive.getBottomPadding(padding: 20),
            // ),
            // margin: const EdgeInsets.all(20),

            color: Colors.deepOrange,
            child: const Text(
              "Purple",
              style: TextStyle(
                fontSize: 50,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          SizedBox(
            height: responsive.getHeight(height: 20),
          ),
          Center(
            child: Text(
              "TEXT",
              textScaleFactor:
                  responsive.getTextScaleFactor(textScaleFactor: 1),
              style: TextStyle(
                fontSize: responsive.getFontSize(fontSize: 30),
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          SizedBox(
            height: responsive.getHeight(height: 20),
          ),
          Container(
            padding: const EdgeInsets.only(
              left: 20,
              right: 20,
              top: 20,
              bottom: 20,
            ),
            color: Colors.deepOrange,
            child: const Text(
              "Purple",
              style: TextStyle(
                fontSize: 50,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

The second is a working method if you know what I mean