I have two designs, the first for mobile devices and the second for iPad. I built a class to do that.

My question is: does this class serve the purpose or need to be modified? Does the iPad size start from 768?

Note: I do not want to use external packages

import 'package:flutter/material.dart';

class ResponsiveBuilder extends StatelessWidget {
  final Widget mobileWidget;
  final Widget? iPadWidget;

  const ResponsiveBuilder({super.key, required this.mobileWidget, this.iPadWidget});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth >= 768) {
          return iPadWidget ?? mobileWidget;
        } else {
          return mobileWidget;
        }
      },
    );
  }
}

CodePudding user response：

It's a general question that does not have the right answer - it depends on your business needs and use cases. By doing minimal research, I noticed some different values:

Source 1:

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV

Source 2:

iPad 1 and 2 - width: 768px, height: 1024px
iPad Air, iPad Mini, iPad Pro 9" - width: 768px, height: 1024px
iPad 3 and 4 - width: 768px, height: 1024px
iPad Air, iPad Mini, iPad Pro 9" - width: 768px, height: 1024px
iPad Pro 10" - width: 834px, height: 1112px
iPad Pro 12" - width: 1024px, height: 1366px

Source 3:

768px   iPad Air, iPad Mini, iPad Pro 9"
834px   iPad Pro 10"

Based on the sources, the provided value of 768px seems okay-ish but I would recommend playing around with different values and your UI to see what specific value makes more sense for your layout to be updated (to "break").

CodePudding user response：

I prefer you to use this class to Make your App Responsive both for Mobile,Ipad

  class SizeConfig {
      static MediaQueryData? _mediaQueryData;
      static double? screenWidth;
      static double? screenHeight;
      static double? defaultSize;
      static Orientation? orientation;
      void init(BuildContext context) {
        _mediaQueryData = MediaQuery.of(context);
        screenWidth = _mediaQueryData?.size.width;
        screenHeight = _mediaQueryData?.size.height;
        orientation = _mediaQueryData?.orientation;
        defaultSize = orientation == Orientation.landscape
            ? screenHeight! * 0.024
            : screenWidth! * 0.024;
      }
    }

And This is the Method how to Call This class On Another class:

class MyClass extends StatefulWidget {
  const MyClass({Key? key}) : super(key: key);

  @override
  State<MyClass> createState() => _MyClassState();
}

class _MyClassState extends State<MyClass> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);//Configure this class inside Build method
    return Scaffold(
      body: Container(
          height: SizeConfig.screenHeight! * 0.05,
          width: SizeConfig.screenWidth! * 0.042,

      ),
    );
  }
}