Can't click buttons on flutter 3.10

[agilerdev]

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

import 'package:flutter/material.dart';
import 'package:responsive_framework/breakpoint.dart';
import 'package:responsive_framework/responsive_breakpoints.dart';
import 'package:responsive_framework/responsive_scaled_box.dart';
import 'package:responsive_framework/responsive_value.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      home: const Test(),
      builder: (context, widget) => ResponsiveBreakpoints.builder(
        child: widget!,
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: 1920, name: DESKTOP),
          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
        ],
      ),
    );
  }
}

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ResponsiveScaledBox(
        width: ResponsiveValue<double>(context, conditionalValues: [
          const Condition.between(start: 0, end: 450, value: 450),
          const Condition.between(start: 451, end: 800, value: 800),
          const Condition.between(start: 801, end: 1600, value: 1600),
          const Condition.largerThan(landscapeValue: 1601, value: 1601),
        ]).value,
        child: const Center(
          child: SelectionArea(child: Table()),
        ),
      ),
    );
  }
}

class Table extends StatelessWidget {
  const Table({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 300,
      child: PaginatedDataTable(
        columns: const [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Details')),
        ],
        source: TableSource(),
        rowsPerPage: 3,
      ),
    );
  }
}

class TableSource extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    return DataRow(cells: [
      const DataCell(Text('Name')),
      DataCell(IconButton(onPressed: () {}, icon: const Icon(Icons.add))),
    ]);
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => 1;

  @override
  int get selectedRowCount => 1;
}

Flutter doctor

flutter doctor          
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.0, on macOS 13.2.1 22D68 darwin-x64, locale en-EC)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.1)
[✓] VS Code (version 1.78.1)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

[abigotado]

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

[agilerdev]

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

[agilerdev]

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.

[abigotado]

@antonio1612 I've checked with FittedBox. You are right, the problem is with FittedBox

[ditman]

I did break this when we added the custom embedding support. We're working on a (maybe hot)fix.

[agilerdev]

Closing this issue because its solved.