CODEWITHSUNDEEP
fluttermaterial-uidraggable
Dhruv
Dhruv

Reputation: 1129

Drag and Drop Chip widgets

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

Upvotes: 1

Views: 1316

Answers (2)

Sebastian Gomes
Sebastian Gomes

Reputation: 930

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
   )
 )

Upvotes: 1

Tor-Martin Holen
Tor-Martin Holen

Reputation: 1639

You can wrap it inside a FloatingActionButton.

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

Hope it helps!

Upvotes: 1

Related Questions