Skip to content

[Slider] Thumb's center doesn't align with division's center #62567

Closed
#149594
Closed
[Slider] Thumb's center doesn't align with division's center#62567
#149594
Assignees
TahaTesser
Labels
found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@hariom08
hariom08
opened on Jul 30, 2020

I'm trying to create a custom slider like the one below :

photo6109691975172205113

For that, I created 2 custom classes from SliderComponentShape and SliderTickMarkShape for the Slider's Thumb and the Slider divisions. In both the class, I was just fiddling around the paint object and radius to create the custom shape for my division and my thumb, and there is nothing fancy.
But the problem is, except the center position in the slider, the thumb doesn't get aligned to any other division's center.
I've posted this problem in the StackOverflow here and explained this very clearly with all the needed codes.

The question is: Shouldn't the thumb's center get naturally aligned to the division's center in all its positions? Or am I missing something?

Activity

  1. HansMuller
    added
    p: material_uimaterial_ui package in flutter/packages
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Jul 30, 2020

  2. HansMuller commented on Jul 30, 2020

    @HansMuller
    HansMuller
    on Jul 30, 2020
    Contributor

    CC @clocksmith @JoseAlba

  3. darshankawar
    added
    passed first triage
    on Sep 25, 2020
  4. TahaTesser
    changed the title [-]Problem in aligning the thumb's center to the division's center in the slider widget.[/-] [+][Slider] Thumb's center doesn't align with division's center[/+] on Jul 21, 2022

  5. TahaTesser commented on Jul 21, 2022

    @TahaTesser
    TahaTesser
    on Jul 21, 2022
    Contributor

    This is reproducible in a new duplicate #108007

    Results provided by @danagbemava-nc

    Issue is reproducible on stable and master

    videos
    no trackheight specified trackHeight 40
    Screen.Recording.2022-07-20.at.13.19.27.mov
    Screen.Recording.2022-07-20.at.13.16.58.mov
    code sample 
    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: CustomSlider(),
        ),
      ),
    );
  }
}

class CustomSlider extends StatefulWidget {
  const CustomSlider({Key? key}) : super(key: key);

  @override
  State<CustomSlider> createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  double _value = .5;

  @override
  Widget build(BuildContext context) => SliderTheme(
        data: const SliderThemeData(
           trackHeight: 30
        ),
        child: Slider(
          value: _value,
          onChanged: (value) => setState(() {
            _value = value;
          }),
          min: 0,
          max: 10,
          divisions: 10,
        ),
      );
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale en-GB)
    • Flutter version 3.0.5 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (7 days ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8609683/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 2021.2)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8609683/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.12+0-b1504.28-7817840)

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

[✓] Connected device (3 available)
    • M2007J20CG (mobile) • 5dd3be00 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)     • macos    • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)        • chrome   • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1754, on macOS 12.4 21F79 darwin-arm, locale en-GB)
    • Flutter version 3.1.0-0.0.pre.1754 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ac539c57c1 (3 hours ago), 2022-07-20 00:53:06 -0400
    • Engine revision 184e9b13fb
    • Dart version 2.19.0 (build 2.19.0-13.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8609683/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • 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 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 2021.2)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8609683/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.12+0-b1504.28-7817840)

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

[✓] Connected device (3 available)
    • M2007J20CG (mobile) • 5dd3be00 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)     • macos    • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)        • chrome   • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!
  6. TahaTesser
    added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    passed first triage
    on Jul 21, 2022
  7. TahaTesser
    self-assigned this
    on May 4, 2023
  8. TahaTesser
    removed their assignment
    on Jun 19, 2023
  9. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023
  10. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  11. TahaTesser
    self-assigned this
    on May 31, 2024
  12. TahaTesser
    added this to Nevercodeon May 31, 2024
  13. github-project-automation
    moved this to To do in Nevercodeon May 31, 2024
  14. TahaTesser
    moved this from To do to In progress in Nevercodeon May 31, 2024

  15. TahaTesser commented on May 31, 2024

    @TahaTesser
    TahaTesser
    on May 31, 2024
    Contributor

    This is blocking #147783

    I'm fixing this bug to unblock the PR.

    Before

    Group 8

    After

    Group 9

  16. TahaTesser
    moved this from In progress to No status in Nevercodeon Jun 3, 2024
  17. TahaTesser
    moved this to PR submitted in Nevercodeon Jun 3, 2024
  18. auto-submit
    added a commit that references this issue on Jul 15, 2024

    Fix `Slider` thumb doesn't align with divisions, thumb padding, and r…

    9e88446
  19. auto-submit
    closed this as completedin #149594on Jul 15, 2024
  20. github-project-automation
    moved this from PR submitted to Done (PR merged) in Nevercodeon Jul 15, 2024
  21. TahaTesser
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jul 15, 2024

  22. github-actions commented on Jul 29, 2024

    @github-actions
    github-actionsbot
    on Jul 29, 2024 – with GitHub Actions

    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.

  23. github-actions
    locked as resolved and limited conversation to collaborators on Jul 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions