harlanx
commented
1 year ago current workaround is wrapping any fluent button that are inside the ReorderableListView's itemBuilder with Material or FluentTheme widget.
Open harlanx opened 1 year ago
harlanx
commented
1 year ago current workaround is wrapping any fluent button that are inside the ReorderableListView's itemBuilder with Material or FluentTheme widget.
bdlukaa
commented
1 year ago We currently export material's ReorderableListView. A proper solution would be to implement ReorderableList in the fluent-design.
A showcase of this can be found at winui3gallery://item/ListView
bdlukaa
commented
1 year ago This is the implementation of reordering in the native WinUI 3 Gallery.
https://github.com/bdlukaa/fluent_ui/assets/45696119/1898a492-a73a-4d02-b514-8efd0f0a6a34
I tried porting Flutter's ReorderableList to the Windows Style, but I faced a limitation. ReorderableList doesn't have the possibility to change the other widgets when one is being dragged, which is the main concept of the native reorderable list
Describe the bug When re-arranging the items with any fluent buttons in ReorderableListView.builder, it throws an assertion on AnimatedDefaultTextStyle
Additional context
Sample code
```dart ReorderableListView.builder( shrinkWrap: true, buildDefaultDragHandles: false, itemCount: numbers.length, onReorder: (oldIndex, newIndex) { setState(() { if (oldIndex < newIndex) { newIndex -= 1; } final int item = numbers.removeAt(oldIndex); numbers.insert(newIndex, item); }); }, itemBuilder: (context, index) { final number = numbers.elementAt(index); return ReorderableDragStartListener( key: ValueKey(index), index: index, child: number.isOdd ? ListTile( key: Key('$index'), // Fluent button tileColor: ButtonState.all(Colors.purple), leading: Button( onPressed: null, child: Text(number.toString()), ), title: Text(number.toString()), ) : ListTile( key: Key('$index'), // Material button tileColor: ButtonState.all(Colors.blue), leading: mt.TextButton( onPressed: null, child: Text(number.toString()), ), title: Text(number.toString()), ), ); }, ) ```Debug
``` ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ The following assertion was thrown building AnimatedDefaultTextStyle(duration: 167ms, debugLabel: ((englishLike bodyMedium 2014).merge(whiteRedmond bodyMedium)).merge(unknown), inherit: false, color: Color(0xffffffff), family: Segoe UI, size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none, textAlign: center, softWrap: wrapping at box width, overflow: clip, dirty, state: _AnimatedDefaultTextStyleState#c44ab(ticker active)): Failed to interpolate TextStyles with different inherit values. The TextStyles being interpolated were: from: TextStyle(inherit: true, color: Color(0xffffffff), size: 14.0, weight: 400) to: TextStyle(debugLabel: ((englishLike bodyMedium 2014).merge(whiteRedmond bodyMedium)).merge(unknown), inherit: false, color: Color(0xffffffff), family: Segoe UI, size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none) The following fields are unspecified in both TextStyles: "backgroundColor", "letterSpacing", "wordSpacing", "height", "decorationColor", "decorationThickness". When "inherit" changes during the transition, these fields may observe abrupt value changes as a result, causing "jump"s in the transition. In general, TextStyle.lerp only works well when both TextStyles have the same "inherit" value, and specify the same fields. If the TextStyles were directly created by you, consider bringing them to parity to ensure a smooth transition. If one of the TextStyles being lerped is significantly more elaborate than the other, and has "inherited" set to false, it is often because it is merged with another TextStyle before being lerped. Comparing the "debugLabel"s of the two TextStyles may help identify if that was the case. For example, you may see this error message when trying to lerp between "ThemeData()" and "Theme.of(context)". This is because TextStyles from "Theme.of(context)" are merged with TextStyles from another theme and thus are more elaborate than the TextStyles from "ThemeData()" (which is reflected in their "debugLabel"s -- TextStyles from "Theme.of(context)" should have labels in the form of "().merge(