Greetings.
My second post reflects a more “serious” challenge in my App building process. (And I still won't reveal what real Application my app will reimagine)
I wanted a row of chips that users can drag and drop to rearrange the chips order.
There is no such widget in FlutterFlow yet. What are the workarounds then?
Try to search in templates
change the UI to the vertical list - this widget has the option to be reorderable
implement Custom Widget
Nothing similar to what I wanted exists in templates.
Vertical List - could work, but this is totally different UX, not suited for my needs.
How hard would it be to implement Custom Widget?
Well, nowadays everybody is using ChatGPT for this kind of task. Of course, there is no guarantee that the suggested code will work at all, or be optimal, but why not?
To my surprise, ChatGPT did recommend an almost working solution on first try. It suggested using “reorderables” library, which was created for this kind of UI. So, after some brief reading of library sample codes and some more ChatGPting I had a custom widget ready to test. The drag though is only activated after a long press on the element. Not the best experience.
“Oh, mighty ChatGPT - can this be fixed, so, instead of long press drag activated immediately?”
The answer was - “No, you see, Reorderables library works that way, but you can implement your own solution, writing procedures from scratch”.
Ugh, no thank you. Ok, it’s not ideal, but at least it is something working, right? Time for the final test:
web version - works ok!
iOS version - works ok!
Android version - works not. Not working! No drag at all. WHAAAT?! 😱 All these efforts… Oh man, I don’t want to implement it from scratch… Ok, calm down, let’s do some internet digging into this “reorderables” Library.
And this digging revealed a similar issue on github, with a recommended answer to use config parameter “needsLongPressDraggable”: false.
Oh wow, apparently it not only fixes my Android problem, but it also fixes this “long press required to activate drag” thing!
All I needed to do was to read official docs!
The morale - ChatGPT is a mighty beast, but Documentation is still something you don’t want to skip.
And this is the excerpt of code for Custom Widget. You must add the dependency "reorderable" and use the paste code from the "code boilerplate" button
class _ReorderableChipsState extends State<ReorderableChips> {
List<String> _items = ['param_1','param_2','param_3','param_4'];
@override
Widget build(BuildContext context) {
List<Widget> _row = _items
.map((item) => Container(
key: ValueKey(item),
child: Chip(
label: Text(item),
),
))
.toList();
return ReorderableWrap(
spacing: 2.0,
runSpacing: 2.0,
children: _row,
needsLongPressDraggable: false, // this!
onReorder: _onReorder,
);
}
void _onReorder(int oldIndex, int newIndex) {
setState(() {
final item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
}
}#BuildInPublic
#FlutterFlowProcess