Setup
For example, imagine a to-do list app where the user can create folders and in each folder, the to-dos are directly editable on the page such that the user loads the list of to-dos in a folder and can click on each TextField directly in the ListView to edit it.
First Approach / The Problem
My initial approach was to create a page which sets its state (a list of to-dos) from the page parameters (to-dos list passed in from the home page) and then generates the to-dos individually in a ListView from the page state as containers with TextFields. With this setup, the TextFields are configurable to update the page state on edit, which can then be pushed to update the DB on the click of a save button. The issue is that FlutterFlow throws the following error:
Widget Configuration: TextField widget with the current configuration will not function properly when generated dynamically at the moment (because it is associated with a local state variable). Consider wrapping it inside of a component and then generate the component dynamically.So, I converted the to-do container to a component which created a logic error in that there's no straightforward way to update the page state when each to-do component TextField was changed...
Solution
The workaround I implemented involved creating a variable in the app state (instead of page state) that holds the list of to-dos being edited. When a to-do folder is opened, the page will load the corresponding data from the database and set the app state accordingly. Then, when a to-do component is generated in the ListView, it is passed a reference number corresponding to its index in the list, which can then be used to update the app state within the component on edit.
This is a pretty messy approach and, though it does work, I'm not really satisfied with the implementation. Is there a better way of going about this? I'd imagine its possible with custom actions, widgets, or functions, but I'm pretty new to FlutterFlow and don't have much experience with Dart/Flutter (though definitely drop those solutions too).
Misc.
On a similar note, I do think its odd though that you can pass an action into a component but then can't access or call that function within the component...? I tried to implement a callback function as a variation of my initial approach but apparently you can't do that. Kind of defeats the whole point of passing in an action, no?