Repository navigation
Checkbox and Chips side with MaterialStateBorderSide doesn't lerp in their theme #135136
Description
In the following, I would expect the side to lerp smoothly between red and blue, but it switches to a single pixel wide grey border instead.
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() {
// Slow down time to see lerping.
timeDilation = 5.0;
runApp(const ThemeExtensionExampleApp());
}
class ThemeExtensionExampleApp extends StatefulWidget {
const ThemeExtensionExampleApp({super.key});
@override
State<ThemeExtensionExampleApp> createState() =>
_ThemeExtensionExampleAppState();
}
class _ThemeExtensionExampleAppState extends State<ThemeExtensionExampleApp> {
bool isLightTheme = true;
void toggleTheme() {
setState(() => isLightTheme = !isLightTheme);
}
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = isLightTheme
? ColorScheme.fromSeed(seedColor: Colors.red)
: ColorScheme.fromSeed(seedColor: Colors.blue);
return MaterialApp(
theme:
ThemeData.from(colorScheme: colorScheme, useMaterial3: true).copyWith(
checkboxTheme: CheckboxThemeData(
side: MaterialStateBorderSide.resolveWith((states) {
return BorderSide(
color: colorScheme.primary,
width: 4,
);
}),
),
),
home: Home(
isLightTheme: isLightTheme,
toggleTheme: toggleTheme,
),
);
}
}
class Home extends StatelessWidget {
const Home({
super.key,
required this.isLightTheme,
required this.toggleTheme,
});
final bool isLightTheme;
final void Function() toggleTheme;
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(value: false, onChanged: (_) {}),
const SizedBox(width: 50),
IconButton(
icon: const Icon(Icons.palette),
tooltip: 'Toggle color',
onPressed: toggleTheme,
),
],
),
),
);
}
}
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listFound to occur in 3.19Found to occur in 3.22flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
- Status
Activity
[-]Checkbox side doesn't lerp properly[/-][+]Checkbox side with `MaterialStateBorderSide` doesn't lerp properly[/+]flutter-triage-bot commentedon Sep 20, 2023
The
triaged-designlabel is irrelevant if there is noteam-designlabel orfyi-designlabel.QuncCccccc commentedon Sep 21, 2023
When we directly provide
Checkbox.sidewith aMaterialStateBorderSidetype, seems lerping works correctly. Still investigating why lerpingMaterialStateBorderSidedoesn't work inCheckboxThemeDataflutter-triage-bot commentedon Feb 8, 2024
This issue is assigned to @QuncCccccc but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!
flutter-triage-bot commentedon Apr 11, 2024
This issue was assigned to @QuncCccccc but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.
huycozy commentedon Apr 12, 2024
This issue persists on the latest stable and master channels.
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 300451adae (8 days ago), 2024-03-27 21:54:07 -0500 • Engine revision e76c956498 • Dart version 3.3.3 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.87.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.106 [✓] Network resources • All expected network resources are available. • No issues found!2 remaining items
[-]Checkbox side with `MaterialStateBorderSide` doesn't lerp properly[/-][+]`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme[/+]Fix `MaterialStateBorderSide` lerp in the `Checkbox` and chips (#148124)
github-actions commentedon May 25, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.