`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme #135136

guidezpl · 2023-09-20T13:11:26Z

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,
            ),
          ],
        ),
      ),
    );
  }
}

The text was updated successfully, but these errors were encountered:

flutter-triage-bot · 2023-09-20T18:49:33Z

The triaged-design label is irrelevant if there is no team-design label or fyi-design label.

QuncCccccc · 2023-09-21T11:36:47Z

When we directly provide Checkbox.side with a MaterialStateBorderSide type, seems lerping works correctly. Still investigating why lerping MaterialStateBorderSide doesn't work in CheckboxThemeData

flutter-triage-bot · 2024-02-08T16:16:58Z

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 · 2024-04-11T14:43:14Z

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 · 2024-04-12T05:07:14Z

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!

[!] Flutter (Channel master, 3.22.0-9.0.pre.17, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-9.0.pre.17 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a34086a573 (3 hours ago), 2024-04-11 18:07:20 -0700
    • Engine revision 6b37b17099
    • Dart version 3.5.0 (build 3.5.0-47.0.dev)
    • DevTools version 2.34.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] 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.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • 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.88.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.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.123

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

fixes [`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme](#135136) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { testWidgets('test', (WidgetTester tester) async { late ColorScheme colorScheme; Widget buildCheckbox({required Color seedColor}) { colorScheme = ColorScheme.fromSeed(seedColor: seedColor); return MaterialApp( theme: ThemeData( colorScheme: colorScheme, checkboxTheme: CheckboxThemeData( side: MaterialStateBorderSide.resolveWith( (Set<MaterialState> states) { return BorderSide( color: colorScheme.primary, width: 4.0, ); }), ), ), home: Scaffold( body: Center( child: Checkbox( value: false, onChanged: (_) {}, ), ), ), ); } await tester.pumpWidget(buildCheckbox(seedColor: Colors.red)); await tester.pumpAndSettle(); RenderBox getCheckboxRenderer() { return tester.renderObject<RenderBox>(find.byType(Checkbox)); } expect(getCheckboxRenderer(), paints..drrect(color: colorScheme.primary)); await Future<void>.delayed(const Duration(seconds: 3)); await tester.pumpWidget(buildCheckbox(seedColor: Colors.blue)); await tester.pump(); await Future<void>.delayed(const Duration(seconds: 3)); expect(getCheckboxRenderer(), paints..drrect(color: colorScheme.primary)); }); } ``` </details> | Before | After | | --------------- | --------------- | | <img src="https://github.com/flutter/flutter/assets/48603081/6df34104-37ba-4a82-b5cb-7ed4f887992a" /> | <img src="https://github.com/flutter/flutter/assets/48603081/44359248-a101-46eb-a85a-77f976da5f0f" /> |

github-actions · 2024-05-25T02:10:52Z

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 -v and a minimal reproduction of the issue.

guidezpl added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 20, 2023

guidezpl changed the title ~~Checkbox side doesn't lerp properly~~ Checkbox side with MaterialStateBorderSide doesn't lerp properly Sep 20, 2023

HansMuller assigned QuncCccccc Sep 20, 2023

HansMuller added P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Sep 20, 2023

flutter-triage-bot bot removed the triaged-design Triaged by Design Languages team label Sep 20, 2023

flutter-triage-bot bot added the ⏳ Bot is counting down the days until it unassigns the issue label Feb 8, 2024

flutter-triage-bot bot unassigned QuncCccccc Apr 11, 2024

flutter-triage-bot bot removed the ⏳ Bot is counting down the days until it unassigns the issue label Apr 11, 2024

huycozy added has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 labels Apr 12, 2024

Piinks added the triaged-design Triaged by Design Languages team label May 1, 2024

TahaTesser self-assigned this May 8, 2024

TahaTesser changed the title ~~Checkbox side with MaterialStateBorderSide doesn't lerp properly~~ Checkbox and Chips side with MaterialStateBorderSide doesn't lerp in their theme May 9, 2024

This was referenced May 10, 2024

Introduce WidgetStateBorderSide.lerp #148122

Merged

Fix MaterialStateBorderSide lerp in the Checkbox and chips #148124

Merged

auto-submit bot closed this as completed in #148124 May 10, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 11, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme #135136

`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme #135136

guidezpl commented Sep 20, 2023 •

edited

flutter-triage-bot bot commented Sep 20, 2023

QuncCccccc commented Sep 21, 2023 •

edited

flutter-triage-bot bot commented Feb 8, 2024

flutter-triage-bot bot commented Apr 11, 2024

huycozy commented Apr 12, 2024

github-actions bot commented May 25, 2024

Checkbox and Chips side with MaterialStateBorderSide doesn't lerp in their theme #135136

Checkbox and Chips side with MaterialStateBorderSide doesn't lerp in their theme #135136

Comments

guidezpl commented Sep 20, 2023 • edited

flutter-triage-bot bot commented Sep 20, 2023

QuncCccccc commented Sep 21, 2023 • edited

flutter-triage-bot bot commented Feb 8, 2024

flutter-triage-bot bot commented Apr 11, 2024

huycozy commented Apr 12, 2024

github-actions bot commented May 25, 2024

`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme #135136

`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme #135136

guidezpl commented Sep 20, 2023 •

edited

QuncCccccc commented Sep 21, 2023 •

edited