How to efficently use mediaquery in flutter?

Question

I'm developing flutter project, I'm using android studio emulator that size of 5.46 inches display. I use mediaquery for responsive design, but it doesn't work.

can someone help me, how to efficiently use mediaquery in flutter

Answer 1

Here is a class built upon Layout Builder and Media Query, to help you to effectively use Media Query to make your designs responsive.

  import 'package:flutter/material.dart';

  class ScreenBuilder extends StatelessWidget {
  final Widget Function(BuildContext context, LayoutSize size) builder;
  const ScreenBuilder({
    Key? key,
    required this.builder,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
  return LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return builder(context, getSize(context));
  },
 );
   }

 LayoutSize getSize(BuildContext context) {
 final width = MediaQuery.of(context).size.width;
 bool isSmall = width <= 900.0;
 bool isSmaller = width <= 535.0;
 LayoutSize size = LayoutSize.large;
 if (isSmaller) {
  size = LayoutSize.min;
   } else if (isSmall) {
  size = LayoutSize.mid;
  }
  return size;
 }
}

enum LayoutSize { min, mid, large }