Unable to use MediaQuery in Flutter Web

Question

I am trying to use MediaQuery in Flutter Web as below :

class Login extends StatefulWidget {
 @override
 _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
 Size size;
 MediaQueryData mediaQuerydata;
 
   @override
    Widget build(BuildContext context) {
     mediaQuerydata = MediaQuery.of(context);
     size = MediaQuery.of(context).size;

     return Container();
 }

════════ Exception caught by widgets library ═══════════════════════════════════ The following UnsupportedError was thrown building LoginWithMobile$(dirty, dependencies: [MediaQuery], state: _LoginWithMobileState#2a7a8): Unsupported operation: Platform._operatingSystem

The relevant error-causing widget was LoginWithMobile$ lib/main.dart:84 When the exception was thrown, this was the stack dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49 throw dart-sdk/lib/_internal/js_dev_runtime/patch/io_patch.dart 244:5 _operatingSystem dart-sdk/lib/io/platform_impl.dart 58:40 get operatingSystem dart-sdk/lib/io/platform.dart 65:45 get _operatingSystem dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 802:8 get

flutter doctor output :

   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel beta, 1.25.0-8.1.pre, on macOS 11.1 20C69                           
   darwin-x64, locale en-IN)
   [✓] Android toolchain - develop for Android devices (Android SDK                             
   version 30.0.2)
   [✓] Xcode - develop for iOS and macOS (Xcode 12.2)
   [✓] Chrome - develop for the web
   [✓] Android Studio (version 4.0)
   [✓] VS Code (version 1.52.1)
   [✓] Connected device (2 available)
       ! Error: iPhone is not connected. Xcode will continue when        
                iPhone is connected. (code -13)

   • No issues found!

Answer 1

I'm not sure MediaQuery works on Flutter Web. Have you tried using LayoutBuilder instead?

Answer 2

try this hopefully work this

MediaQuery.sizeOf(context).width