Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to make Flutter Responsive app for all platform

Which is best dependency or method to make flutter responsive to all platforms.

I tried using ScreenUtil and Media Query but don’t exactly know how to do it

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Hi Ferox use below Class to make your UI responsive

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

const Responsive({
 Key? key,
required this.mobile,
required this.tablet,
required this.desktop,
}) : super(key: key);


static bool isMobile(BuildContext context) =>
  MediaQuery.of(context).size.width < 850;

static bool isTablet(BuildContext context) =>
  MediaQuery.of(context).size.width < 1100 &&
  MediaQuery.of(context).size.width >= 850;

static bool isDesktop(BuildContext context) =>
  MediaQuery.of(context).size.width >= 1100;

@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;

if (size.width >= 1100) {
  return desktop;
} else if (size.width >= 850) {
  return tablet;
} else {
  return mobile;
}
}
}

and use it like

   if (Responsive.isDesktop(context))
            Container(),//your UI
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading