Question 77082 in Flutter Question posted in
The official Flutter documentation can be found here.

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

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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,

      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search