flutterresponsive-designflutter-layout

With device_preview plugin in Flutter MediaQuery.of(context).size.width doesn't give the emulated phone's witdh

To practice responsive design in Flutter, I have decided to use device_preview. I tried different phones out. But every time I got the original device's width.

For example, original device's witdh is 1700px but simulated device's witdh is 600px. I cannot get simulated device's witdh.

Are there any settings to fix that issue? Or is it basically how it works?

Solution

  • I missed a point. In MaterialApp we should add locale and builder to consume simulated devices' screen size.

    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            locale: DevicePreview.of(context).locale,
            builder: DevicePreview.appBuilder,
            home: MyApp());
      }
    }