Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Proposal] Allow default Slider thumb shape to be easily customizable #113781

Open
Tracked by #125329
dlewis2017 opened this issue Oct 20, 2022 · 5 comments
Open
Tracked by #125329

[Proposal] Allow default Slider thumb shape to be easily customizable #113781

dlewis2017 opened this issue Oct 20, 2022 · 5 comments
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P3 Issues that are less important to the Flutter project team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@dlewis2017
Copy link

dlewis2017 commented Oct 20, 2022 •
edited

Steps to Reproduce

  1. flutter create --sample=material.Slider.1 mysample
  2. flutter run
  3. test
  4. Change flutter code in main.dart to incorporate SliderTheme and override thumbShape to use rectangular shape per documentation, see below snippet. Using RectangularSliderValueIndicatorShape as it is a subclass of SliderComponentShape, SliderComponentShape being the accepted type for thumbShape property in SliderThemeData.
  5. Save changes and hot reload 'r'

Expected results: Expected to see a square where there was a circle

Actual results: Does not render, I believe main error from logs below is this line:

════════ Exception caught by rendering library ═════════════════════════════════
'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.

Side note: Label doesn't seem to show either

Code sample 
return SliderTheme(
      data: SliderTheme.of(context)
          .copyWith(thumbShape: const RectangularSliderValueIndicatorShape()),
      child: Slider(
        value: _currentSliderValue,
        max: 100,
        divisions: 5,
        label: _currentSliderValue.round().toString(),
        onChanged: (double value) {
          setState(() {
            _currentSliderValue = value;
          });
        },
      ),
    );
Logs 
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
                    The following assertion was thrown during paint():
                    'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter
                    != null': is not true.
                    
                    Either the assertion indicates an error in the framework itself, or we should provide substantially
                    more information in this error message to help you determine and fix the underlying cause.
                    In either case, please report this assertion by filing a bug on GitHub:
                      https://github.com/flutter/flutter/issues/new?template=2_bug.md
                    
                    The relevant error-causing widget was:
                      Slider Slider:file:///Users/synchronmac/Source/mysample/lib/main.dart:37:14
                    
                    When the exception was thrown, this was the stack:
                    #2      RectangularSliderValueIndicatorShape.getPreferredSize (package:flutter/src/material/slider_theme.dart:2604:12)
                    #3      BaseSliderTrackShape.getPreferredRect (package:flutter/src/material/slider_theme.dart:1483:55)
                    #4      _RenderSlider.paint (package:flutter/src/material/slider.dart:1433:53)
                    #5      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #6      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #7      RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #8      PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:460:12)
                    #9      RenderLeaderLayer.paint (package:flutter/src/rendering/proxy_box.dart:4736:13)
                    #10     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #11     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #12     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #13     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #14     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #15     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #16     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #17     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #18     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #19     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #20     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #21     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #22     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #23     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #24     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2900:15)
                    #25     RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:415:5)
                    #26     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #27     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #28     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #29     _RenderInkFeatures.paint (package:flutter/src/material/material.dart:609:11)
                    #30     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #31     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #32     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #33     RenderPhysicalModel.paint.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:2098:15)
                    #34     PaintingContext.pushClipRRect (package:flutter/src/rendering/object.dart:550:14)
                    #35     RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:2085:21)
                    #36     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #37     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #38     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #39     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #40     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #41     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #42     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #43     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:155:11)
                    #44     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:98:5)
                    #45     PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:250:7)
                    #46     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:231:7)
                    #47     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #48     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #49     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #50     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2900:15)
                    #51     RenderStack.paintStack (package:flutter/src/rendering/stack.dart:654:5)
                    #52     RenderStack.paint (package:flutter/src/rendering/stack.dart:670:7)
                    #53     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #54     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #55     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #56     RenderDecoratedBox.paint (package:flutter/src/rendering/proxy_box.dart:2371:11)
                    #57     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #58     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #59     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #60     RenderFractionalTranslation.paint (package:flutter/src/rendering/proxy_box.dart:3023:13)
                    #61     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #62     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #63     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #64     RenderFractionalTranslation.paint (package:flutter/src/rendering/proxy_box.dart:3023:13)
                    #65     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #66     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #67     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #68     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #69     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:155:11)
                    #70     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:98:5)
                    #71     PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:250:7)
                    #72     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:231:7)
                    #73     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #74     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #75     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #76     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #77     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #78     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #79     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #80     RenderOffstage.paint (package:flutter/src/rendering/proxy_box.dart:3757:11)
                    #81     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #82     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #83     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #84     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #85     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #86     _RenderTheatre.paintStack (package:flutter/src/widgets/overlay.dart:842:15)
                    #87     _RenderTheatre.paint (package:flutter/src/widgets/overlay.dart:860:7)
                    #88     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #89     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #90     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #91     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #92     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #93     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #94     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #95     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #96     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #97     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #98     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #99     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #100    RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:616:11)
                    #101    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #102    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #103    RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #104    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #105    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #106    RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #107    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #108    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #109    RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #110    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #111    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #112    RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #113    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #114    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #115    RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:144:15)
                    #116    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #117    PaintingContext.paintChild (package:flutter/src/rendering/object.dart:239:13)
                    #118    RenderView.paint (package:flutter/src/rendering/view.dart:211:15)
                    #119    RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2796:7)
                    #120    PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:155:11)
                    #121    PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:98:5)
                    #122    PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1116:31)
                    #123    RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:515:19)
                    #124    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:13)
                    #125    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:378:5)
                    #126    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15)
                    #127    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1104:9)
                    #128    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:881:7)
                    (elided 6 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, and dart:async-patch)
                    
                    The following RenderObject was being processed when the exception was fired: _RenderSlider#3c3df:
                      creator: _SliderRenderObjectWidget-[GlobalKey#6f989] ← CompositedTransformTarget ← Semantics ←
                        _FocusMarker ← Focus ← MouseRegion-[GlobalKey#47ceb] ← _ActionsMarker ← Actions ← Semantics ←
                        _FocusMarker ← Focus ← Shortcuts ← ⋯
                      parentData: <none> (can use size)
                      constraints: BoxConstraints(0.0<=w<=800.0, 0.0<=h<=544.0)
                      size: Size(800.0, 544.0)
                    This RenderObject has no descendants.
                    ════════════════════════════════════════════════════════════════════════════════════════════════════
[  +18 ms] The Flutter DevTools debugger and profiler on macOS is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:58290/0NCnxz1ll7U=/
[ +184 ms] 
                    Another exception was thrown: 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.
[  +14 ms] 
           Another exception was thrown: 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.
[  +15 ms] 
           Another exception was thrown: 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.
[  +16 ms] 
           Another exception was thrown: 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.
[  +15 ms] 
           Another exception was thrown: 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 2604 pos 12: 'labelPainter != null': is not true.
...

Analyzing mysample...                                                   
No issues found! (ran in 1.4s)

[✓] Flutter (Channel stable, 3.3.4, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.3.4 on channel stable at
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eb6d86ee27 (2 weeks ago), 2022-10-04 22:31:45 -0700
    • Engine revision c08d7d5efc
    • Dart version 2.18.2
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at
    • Platform android-32, build-tools 32.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.72.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 106.0.5249.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label Oct 21, 2022
@danagbemava-nc
Copy link
Member

Hi @dlewis2017, I don't think you can use the RectangularSliderValueIndicatorShape as a thumbShape. According to the docs https://api.flutter.dev/flutter/material/RectangularSliderValueIndicatorShape-class.html, this is the default value for the shape of the value indicator. If you use it as the valueIndicatorShape instead of thumbShape, to works as expected.

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Oct 21, 2022
@dlewis2017
Copy link
Author

dlewis2017 commented Oct 21, 2022 •
edited

valueIndicatorShape works great for the tooltip popup that occurs once you press down on the slider but I am trying to change the shape of the thumb when it's at rest. I'm now seeing though that you can't do that. I was hoping that since RoundedSliderThumbShape and RectangularSliderValueIndicatorShape were derived from the same base class, I could use the rect... in place of the 'rounded...' to make the thumb rectangular.

So I guess this isn't a bug (in which case it can be closed) but if this can be turned into a feature request to allow the thumb to change shape, that'd be great.

In the meantime, I can probably use this to accomplish what I want but it'd be nice if it was an adjustable setting.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Oct 21, 2022
@danagbemava-nc danagbemava-nc changed the title Rectangular thumb shape not working [Proposal] Allow default Slider thumb shape to be easily customisable Oct 24, 2022
@danagbemava-nc
Copy link
Member

Labeling as a proposal for further insight from the team

@danagbemava-nc danagbemava-nc added c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. c: proposal A detailed proposal for a change to Flutter and removed in triage Presently being triaged by the triage team labels Oct 24, 2022
@Piinks Piinks added the P3 Issues that are less important to the Flutter project label Oct 27, 2022
@TahaTesser TahaTesser self-assigned this Oct 28, 2022
@rydmike
Copy link
Contributor

rydmike commented Jan 18, 2023 •
edited

What would also be useful, and potentially simpler and none breaking to modify, is if the RectangularRangeSliderValueIndicatorShape that extends abstract RangeSliderValueIndicatorShape that is just Object, would instead extend SliderComponentShape and RangeSlider would then change its indicator rangeValueIndicatorShape to be a SliderComponentShape. Then we could use all pre-existing indicator shapes:

  • DropSliderValueIndicatorShape
  • RectangularSliderValueIndicatorShape
  • RangeSliderValueIndicatorShape

Interchangeably on both Slider and RangeSlider and when we make a custom indicator it can be shared by both too.

@TahaTesser
Copy link
Member

@rydmike
Agree! This would be a great quality-of-life update.

@TahaTesser TahaTesser removed their assignment Mar 9, 2023
@dlewis2017 dlewis2017 changed the title [Proposal] Allow default Slider thumb shape to be easily customisable [Proposal] Allow default Slider thumb shape to be easily customizable Mar 28, 2023
@rydmike rydmike mentioned this issue Apr 21, 2023
Open
32 tasks
@TahaTesser TahaTesser self-assigned this May 4, 2023
@TahaTesser TahaTesser removed their assignment Jun 19, 2023
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. P3 Issues that are less important to the Flutter project team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
Slider Updates
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
6 participants
@Hixie @dlewis2017 @Piinks @rydmike @TahaTesser @danagbemava-nc