1

I'm making a responsive widget in Flutter (this question was asked on Stack Overflow). My app shows the mobile screen when using a mobile device, the tablet screen when using a tablet device, and the desktop screen when using a desktop device. However, my mobile device shows the tablet screen when I rotate it, even though I'm using a mobile.

I tried this package but still get the same result.

My code:

import 'package:flutter/material.dart';

import 'package:sizer/sizer.dart';

class Responsive extends StatelessWidget {
  const Responsive({required this.mobile, required this.tablet, required this.desktop, super.key});

  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  static bool isMobile(BuildContext context) => SizerUtil.deviceType == DeviceType.mobile && SizerUtil.deviceType != DeviceType.tablet;

  static bool isTablet(BuildContext context) => SizerUtil.deviceType != DeviceType.mobile && SizerUtil.deviceType == DeviceType.tablet;

  static bool isDesktop(BuildContext context) => SizerUtil.deviceType != DeviceType.mobile && SizerUtil.deviceType != DeviceType.tablet;

  @override
  Widget build(BuildContext context) => LayoutBuilder(
        builder: (context, constraints) {
          debugPrint("isMobile: ${isMobile(context)}");
          debugPrint("isTablet: ${isTablet(context)}");
          debugPrint("isDesktop: ${isDesktop(context)}");

          return isDesktop(context)
              ? desktop
              : isTablet(context)
                  ? tablet
                  : mobile;
        },
      );
}

import 'package:flutter/material.dart';

import 'package:project/desktop_screen.dart';
import 'package:project/mobile_screen.dart';
import 'package:project/tablet_screen.dart';

class MainScreen extends ConsumerWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Responsive(
      mobile: const MobileScreen(),
      tablet: const TabletScreen(),
      desktop: const DesktopScreen(),
    );
  }
}

Feel free to leave a comment if you need more information.

Why does my mobile device show a tablet screen when rotated, even though I'm using a mobile device? I would appreciate any help. Thank you in advance!

My Car
  • 4,198
  • 5
  • 17
  • 50
  • Look at [this](https://github.com/TechnoUrmish/Sizer/pull/6) issue. – fartem Dec 12 '22 at 03:17
  • Hi, consider saving the type of the device (isMobile, isTablet...) in a variable or a class with a static member, then use it across your app, so even if you switch between landscape or portrait mode, your widget will refer to the device type that's saved from the app's first run, so the widget result stay the same even if you rotated the device. – Gwhyyy Dec 12 '22 at 03:30
  • Hi @fartem thanks for your comment. Can you share more information? Looking at the link you shared, I still don't get it. – My Car Dec 12 '22 at 03:39
  • Hi @Gwhyyy thanks for your comment. I don't know if my original code did what you said. I updated my question – My Car Dec 12 '22 at 03:46

1 Answers1

0

You will have to make separate widgets for landscape and portrait for it to work properly. You can read from the package suggestion for orientation.

Here is also an example to use if you need more references to make orientation work.

For example, you can have this below, it should check and return the widget base on the orientation.

SizerUtil.orientation == Orientation.portrait
              ? SizedBox(
                  height: 30.h,
                  child: Image.network("https://m.media-amazon.com/images/I/518fAl617rL._AC_SY1000_.jpg"),
                )
              : SizedBox(
                  height: 10.h,
                  child: Image.network("https://m.media-amazon.com/images/I/518fAl617rL._AC_SY1000_.jpg"),
                ),
Eternity
  • 217
  • 1
  • 9