Drag and Drop Chip widgets

Question

I was trying to make a list of chips which user can reorder by doing drag and drop gesture, Here is sample code which you can execute to see the issue, As being told, Chip class need a Material ancestor, so what is solution to this? Have to keep Chip wrapped with Card all the time?

Error:

The following assertion was thrown building Chip(dirty): No Material widget found. Chip widgets require a Material widget ancestor.

Code:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Wrap(
          direction: Axis.horizontal,
          children: List.generate(_counter, (i) {
            var chip = Chip(
              backgroundColor: Colors.blue,
              label: Text('item ${i}'),
            );

            return Draggable(
              child: chip,
              feedback: chip,
              childWhenDragging: Container(),
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

note: I have modified the default click count template to demonstrate my issue

Solution 1

I had encountered the same issue. You can not use chips in the feedback of draggable. What I did is, wrapped my chip in Material with transparent background. The transparent background helps to remove the extra style that gets added from the Material widget.

feedback: Material(
   color: Colors.transparent,
   child: Chip(
       // your code for the Chip
   )
 )

Solution 2

You can wrap it inside a FloatingActionButton.

var chip = FloatingActionButton(
  child: Chip(
    backgroundColor: Colors.blue,
    label: Text('item $i'),
  ),
);

Hope it helps!

Comments

[Dhruv Mevada]

I ended up using FloatingActionButton.extended instead of chips

[Dhruv Mevada]

I did try with Floating action button, although that is now what I want.