currently a lot of time is spent in flutter syncing widgets with data, usually by way of controllers provided by the framework (TextEditingController, PageController, ScrollController, etc). Also, we often need to manipulate numbers or other primitive types in a TextFormField, but there is a lot of configuration involved.
to provide a set of simple widgets whose sole purpose is to manipulate or respond to data
Imagine using ListView
to display a list of values. The two common ways are read only and don't integrate with the List
type.
final values = [1,2,3,4];
ListView(
children: [
for(final x in values)
ListTile(title: Text("$x"))
]
)
consider a version of ListView
that instead accepts a source List
, but also has an onChange
callback and allows the user to drag-to-reorder or delete items, while also animating items being added/moved/deleted when the source List
is mutated by app code.
final values = [1,2,3,4];
CollectionListView(
source: values,
actions: [CollectionAction.move, CollectionAction.delete],
onChange: (updatedValues){
setState(()=>values = updatedValues);
},
builder: (context, x){
return ListTile(title: Text("$x"))
},
)
- TextFormField -> IntTextFormField
- TextFormField -> DoubleTextFormField
- TextFormField -> EmailTextFormField
- PageView + PageController + Enum -> EnumPageView
- Stack + Custom Animation + Enum -> EnumStack
- ReorderableListView + Callback + Slideable -> CollectionColumn / CollectionListView
- think of a data type, ie
List<T>
- then think of how people manipulate it in ui, ie drag to reorder, swipe to delete
- look at flutter built in widgets to see if they can get close with a slight api change
- look at swiftui to see if they have solved this problem already (they almost certainly have)
- then make a widget that allows the user to directly interact with a data type in code, typically with a simple
source:
property andonChange()
callback
- all contributions to codebase or example are welcome
- search for
// TODO:
in the codebase - look at SwiftUI for inspiration. they are the current leader in data driven components
- contact me at @luke_pighetti on x for questions