Closed agilerdev closed 1 year ago
I still use 0.2.0 version of the responsive_framework and have exactly the same problem after upgrading to Flutter 3.10. Only going back to Flutter 3.7.12 helps. Or removing ResponsiveWrapper
.
My ResponsiveWrapper
code:
/// Class for creating responsive view depending on screen size.
class MainResponsiveWrapper extends StatelessWidget {
/// Creates MainResponsiveWrapper.
const MainResponsiveWrapper({required this.child, super.key});
/// Widget, which will be wrapped in [ResponsiveWrapper].
final Widget child;
@override
Widget build(final BuildContext context) => ResponsiveWrapper(
minWidth: 320,
defaultScale: true,
mediaQueryData: MediaQuery.of(context).copyWith(textScaleFactor: 1),
alignment: Alignment.center,
defaultScaleLandscape: true,
breakpoints: kIsWeb
? _webBreakpoints
: _mobileBreakpoints,
breakpointsLandscape: _webBreakpoints,
child: child,
);
}
const List<ResponsiveBreakpoint> _webBreakpoints = <ResponsiveBreakpoint>[
ResponsiveBreakpoint.autoScaleDown(500, name: 'Small', scaleFactor: 0.5),
ResponsiveBreakpoint.resize(600, name: MOBILE, scaleFactor: 0.6),
ResponsiveBreakpoint.autoScale(900, name: TABLET, scaleFactor: 0.6),
ResponsiveBreakpoint.resize(1000, name: DESKTOP, scaleFactor: 0.75),
ResponsiveBreakpoint.autoScale(1430, name: '2K', scaleFactor: 0.75),
ResponsiveBreakpoint.resize(2050, name: 'Design target', scaleFactor: 1),
ResponsiveBreakpoint.autoScale(2460, name: '4K', scaleFactor: 1),
];
const List<ResponsiveBreakpoint> _mobileBreakpoints = <ResponsiveBreakpoint>[
/// Examples: old Android phones.
ResponsiveBreakpoint.resize(320, name: PHONE, scaleFactor: 0.8),
/// Examples: iPhone SE 3
ResponsiveBreakpoint.resize(
360,
name: 'SMALL_MOBILE',
),
/// Examples: iPhone 14 PRO, Xiaomi 12
ResponsiveBreakpoint.resize(
390,
name: MOBILE,
scaleFactor: 1.05,
),
/// Examples: iPhone 14 PRO MAX
ResponsiveBreakpoint.resize(
428,
name: 'BIG_MOBILE',
scaleFactor: 1.15,
),
/// Examples: foldable smartphones
ResponsiveBreakpoint.autoScale(
520,
name: 'HUGE_MOBILE',
scaleFactor: 0.9,
),
/// Examples: iPad mini
ResponsiveBreakpoint.autoScale(680, name: TABLET, scaleFactor: 1.2),
/// Examples: iPad Pro (12.9-inch)
ResponsiveBreakpoint.resize(
1000,
name: 'BIG_TABLET',
scaleFactor: 1.3,
),
];
I use 0.2.0 as well, but I thought that maybe the error was because of the version of the package I was using, that's why I tried with the 1.0.0 and happened too. I've been wanting to try to just using a fitted box instead of using the package, because if im not mistaken the package just uses a FittedBox to make the scaled effect so if with just using FittedBox the same error happens we might need to open the issue on the flutter GitHub repository. I haven't had the time to try it, so if someone could try It would be great, nonetheless I'll try it when I got the time
Yep it looks like the issue its from the FittedBox widget, I just found this issue https://github.com/flutter/flutter/issues/126754 and it pretty much looks like the same problem we are having, so we might just need to wait until its fixed on the flutter part.
@antonio1612 I've checked with FittedBox. You are right, the problem is with FittedBox
I did break this when we added the custom embedding support. We're working on a (maybe hot)fix.
Closing this issue because its solved.
Flutter 3.10 web I noticed this issue when I updated my project to flutter 3.10, I tried using a button that was on a Table and I could click it until I resized the screen a certain value. At first I thought it was a flutter issue so I created a project to try it and it worked without any problem. Then I tried using the responsive framework with a responsiveScalledBox and then when the windows was scaled I could click on the buttons. I also noticed that if I removed the SelectionArea the button worked again, but for my case I need to use it.
I'll respond gladly any questions that might help.
For now I think I might have to stick to flutter 3.7.12 until this bug its fixed.
Here's some screenshots
The button work as intended and can be clicked (screen width size at 1640)
The screen is resized and now It can't be clicked (screen width size at 984)
Here is the code sample I used
Flutter doctor