ResponsiveFramework

ResponsiveFramework copied to clipboard

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

Noted, thank you for the reproducible code.

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

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

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?