When `ResponsiveScaledBox`s width is greater than default width, an exception will be thrown

[WillianSalceda]

The Problem

The width parameter of the ResponsiveScaledBox widget must not be larger than the default width already set by Flutter itself, otherwise an exception/assertion will be thrown whilst using ReorderableListView.

When it happens

Using ReorderableListView (and perhaps any other type of "Reorderable" widget) will be guaranteed to have an exception/assertion thrown while trying to rearrange the children order.

Log

Assertion failed: globalRect.size.width >= _dragTargetRelatedToScrollOrigin.size.width &&  globalRect.size.height >= _dragTargetRelatedToScrollOrigin.size.height

Drag target size is larger than scrollable size, which may cause bouncing

Minimum reproducible code

import 'package:flutter/material.dart';
import 'package:responsive_framework/responsive_framework.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveBreakpoints.builder(
        child: Builder(
          builder: (responsiveContext) {
            return ResponsiveScaledBox(
              width: ResponsiveValue<double>(
                responsiveContext,
                conditionalValues: [
                  const Condition.equals(name: 'SMALL_MOBILE', value: 520),
                  const Condition.equals(name: MOBILE, value: 420),
                  const Condition.between(start: 800, end: 1100, value: 800),
                  const Condition.between(start: 1000, end: 1200, value: 1000),
                ],
              ).value,
              child: MyHomePage(),
            );
          },
        ),
        breakpoints: [
          const Breakpoint(start: 0, end: 360, name: 'SMALL_MOBILE'),
          const Breakpoint(start: 361, 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'),
        ],
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final elements = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ReorderableListView(
      children: <Widget>[
        for (int index = 0; index < elements.length; index++)
          Column(
            key: Key('$index'),
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ListTile(
                title: Container(
                  height: 72,
                  width: 72,
                  decoration: BoxDecoration(
                    color: Colors.grey[200]!,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {},
    ));
  }
}

[rayliverified]

Noted, thank you for the reproducible code.

[Lonyless]

also the position of the item while it's being dragged changes slightly to the left or right depending on the width you set

[mister-rao]

Any updates on how to fix this with v1.1.0 ?

[elkSal]

Facing same issue with ReorderableListView, when dragging, the item overflows and become bigger than original size. Quick dirty solution is to use internal padding as follows

ReorderableListView(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 20),

This puts some padding around the list view item so that on drag, it doesn't overflow screen width.

No solution yet?