Make Wrap children fill empty spaces

Question

I have implemented a Wrap (with WrapAlignment.center) with drag and drop. Users can insert and rearrange items (with text). It means I insert DragTarget around the items. But the DragTargets are small, meaning there is empty space at the edges.It makes it harder to drop, since the users must position the finger with precision. It would make much sense if I could make DragTargets fill the empty spaces, without affecting the layout of the main items.How can I do that?

This seems to be generally reasonable requirement for Wraps.

This is how I construct the Wrap children:

var wrap = Wrap(
  runSpacing: 5,
  children: children, alignment: WrapAlignment.center,
  crossAxisAlignment: WrapCrossAlignment.center);

wrap.children!.add(UnconstrainedBox(child: Row(children: [
      createTarget(40, 20),
      Draggable(
          feedback: Text(...),
          dragAnchorStrategy: draggableOffset,
          child: Text(...)),
      createTarget(40, 20),
    ], mainAxisAlignment: MainAxisAlignment.center)));

return
   Container(
   color: getYellow(),
   padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
   constraints: BoxConstraints(minHeight: 120),
   child: Center(child: wrap));

createTarget

    createTarget(double height, double width) {
      return DragTarget(
         builder: (context, candidateItems, rejectedItems) {
         return Container(height: height, width: width,);
      }});

So basically, the wrap childrens are rows with [DragTarget, widget, DragTarget] to make sure there DragTargets are always present at the sides of my widgets. Naturally that is no going to make the DragTargets fill. I don't even know where to begin.

Edit: Here is implementation of wrap that fills horizontally, witch centered Text. I just need to add the DragTargets on each side, filling up empty horizontal space, with Wrap in one line as before

  var wrap = Wrap(
  children: [Text('Hi')],
  alignment: WrapAlignment.center,
  runAlignment: WrapAlignment.center,
  crossAxisAlignment: WrapCrossAlignment.center);

return
  ConstrainedBox(
  constraints: BoxConstraints(minHeight: 120, maxHeight: 200, minWidth: double.maxFinite),
  child: Container(color: Color(0x33000000), child: wrap,));

Make Wrap children fill empty spaces

0 Answers