Flutter responsive class

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;
        }
      },
    );
  }
}

Solution

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").