bdlukaa / bdlukaa/fluent_ui

Get an error when put Buttons in ReorderableListView

Open
#1,249 0 comments 0 reactions 0 assignees View on GitHub
bug w: Input
Dominant language
Dart
Stars
3.5k
Forks
506
Avg merge
11d 2h
Merged PRs (30d)
3

Description

I put a Button in each item of a ReorderableListView. When i try to drag the items around (reorder the items), get the error:
```
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building AnimatedDefaultTextStyle(duration: 167ms, debugLabel: ((dense bodyMedium 2021).merge((whiteRedmond bodyMedium).apply)).merge(unknown), inherit: false, color: Color(alpha: 1.0000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.sRGB), family: Segoe UI, size: 14.0, weight: 400, letterSpacing: 0.3, baseline: ideographic, height: 1.4x, leadingDistribution: even, decoration: Color(alpha: 1.0000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.sRGB) TextDecoration.none, textAlign: center, softWrap: wrapping at box width, overflow: clip, dirty, state: _AnimatedDefaultTextStyleState#69402(ticker active)):
Failed to interpolate TextStyles with different inherit values.

The TextStyles being interpolated were:
from: TextStyle
inherit: true
color: Color(alpha: 1.0000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.sRGB)
size: 14.0
weight: 400
to: TextStyle
debugLabel: ((dense bodyMedium 2021).merge((whiteRedmond bodyMedium).apply)).merge(unknown)
inherit: false
color: Color(alpha: 1.0000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.sRGB)
family: Segoe UI
size: 14.0
weight: 400
letterSpacing: 0.3
baseline: ideographic
height: 1.4x
leadingDistribution: even
decoration: Color(alpha: 1.0000, red: 1.0000, green: 1.0000, blue: 1.0000, colorSpace: ColorSpace.sRGB) TextDecoration.none
The following fields are unspecified in both TextStyles:
"backgroundColor", "wordSpacing", "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()"). It is recommended to only lerp ThemeData with matching TextStyles.

The relevant error-causing widget was:
Button-[<'231089141'>] Button:file:///C:/Work/Projects/auto_game/lib/main.dart:31:13

When the exception was thrown, this was the stack:
#0 TextStyle.lerp. (package:flutter/src/painting/text_style.dart:1241:7)
text_style.dart:1241
#1 TextStyle.lerp (package:flutter/src/painting/text_style.dart:1282:6)
text_style.dart:1282
#2 TextStyleTween.lerp (package:flutter/src/widgets/implicit_animations.dart:223:41)
implicit_animations.dart:223
#3 Tween.transform (package:flutter/src/animation/tween.dart:369:12)
tween.dart:369
#4 Animatable.evaluate (package:flutter/src/animation/tween.dart:71:46)
tween.dart:71
#5 _AnimatedDefaultTextStyleState.build (package:flutter/src/widgets/implicit_animations.dart:2153:22)
implicit_animations.dart:2153
#6 StatefulElement.build (package:flutter/src/widgets/framework.dart:5833:27)
framework.dart:5833
#7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5723:15)
framework.dart:5723
#8 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5884:11)
framework.dart:5884
#9 Element.rebuild (package:flutter/src/widgets/framework.dart:5435:7)
framework.dart:5435
#10 BuildScope._tryRebuild (package:flutter/src/widgets/framework.dart:2695:15)
framework.dart:2695
#11 BuildScope._flushDirtyElements (package:flutter/src/widgets/framework.dart:2752:11)
framework.dart:2752
#12 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:3056:18)
framework.dart:3056
#13 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1259:21)
binding.dart:1259
#14 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:495:5)
binding.dart:495
#15 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1434:15)
binding.dart:1434
#16 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1347:9)
binding.dart:1347
#17 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1200:5)
binding.dart:1200
#18 _invoke (dart:ui/hooks.dart:330:13)
hooks.dart:330
#19 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:444:5)
platform_dispatcher.dart:444
#20 _drawFrame (dart:ui/hooks.dart:302:31)
hooks.dart:302

════════════════════════════════════════════════════════════════════════════════
```

Example code:
```
class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
List nodes = ['111', '222', '333'];
return FluentApp(
themeMode: ThemeMode.dark,
darkTheme: FluentThemeData(
brightness: Brightness.dark,
visualDensity: VisualDensity.standard,
focusTheme: FocusThemeData(
glowFactor: is10footScreen(context) ? 2.0 : 0.0,
),
),
debugShowCheckedModeBanner: false,
home: ReorderableListView(
onReorder: (int oldIndex, int newIndex) {},
children: [
for (String node in nodes)
Button(
key: Key('${node.hashCode}'),
child: Text(node),
onPressed: () {},
),
],
),
);
}
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the provided ReorderableListView/Button example from lib/main.dart and inspect the stack through TextStyle.lerp and AnimatedDefaultTextStyle. Compare behavior before and during reorder; done when dragging items containing Button no longer triggers the assertion.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.