DropDownButton underline is a long way away from the text it underlines. #4664

Activity

1. abarth commented on Jun 21, 2016

   

   abarth

   on Jun 21, 2016

   Contributor

   More actions

   /cc @HansMuller
2. abarth

   added

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   customer: leafy

   on Jun 21, 2016
3. eseidelGoogle commented on Jun 21, 2016

   

   eseidelGoogle

   on Jun 21, 2016

   Contributor

   More actions

   We also just need to check the DropDownButton pixel exactly matches the spec:
   https://material.google.com/components/buttons.html#buttons-dropdown-buttons
4. eseidelGoogle commented on Jun 22, 2016

   

   eseidelGoogle

   on Jun 22, 2016

   Contributor

   More actions

   Our sizes are just wrong.

   Spec:
   
   Flutter:
   

   @HansMuller could you take this?
5. Hixie commented on Jun 22, 2016

   

   Hixie

   on Jun 22, 2016

   Contributor

   More actions

   The size of the arrow might be something I broke with the icon changes.

   The underline is because _kBottomBorderHeight is set to 2.0. That looks intentional. I don't know where we got that from. The spec seems to use a hairline (0.0). Fixing the underline width might be as simple as replacing that 2.0 with 0.0.
6. HansMuller

   self-assigned this

   on Jun 22, 2016
7. HansMuller commented on Jun 22, 2016

   

   HansMuller

   on Jun 22, 2016

   Contributor

   More actions

   I agree that the underline's size and position and the arrow's size don't match the spec. Will fix.
8. eseidelGoogle commented on Jun 23, 2016

   

   eseidelGoogle

   on Jun 23, 2016

   Contributor

   More actions

   I wrote a half-patch yesterday. In case it's useful:

   diff --git a/packages/flutter/lib/src/material/drop_down.dart b/packages/flutter/lib/src/material/drop_down.dart
   index 6ea5a91..185570a 100644
   --- a/packages/flutter/lib/src/material/drop_down.dart
   +++ b/packages/flutter/lib/src/material/drop_down.dart
   @@ -21,7 +21,7 @@ const double _kMenuItemHeight = 48.0;
    const EdgeInsets _kMenuVerticalPadding = const EdgeInsets.symmetric(vertical: 8.0);
    const EdgeInsets _kMenuHorizontalPadding = const EdgeInsets.symmetric(horizontal: 4.0);
    const double _kBaselineOffsetFromBottom = 20.0;
   -const double _kBottomBorderHeight = 2.0;
   +const double _kBottomBorderHeight = 1.0;
    const Border _kDropDownUnderline = const Border(bottom: const BorderSide(color: const Color(0xFFBDBDBD), width: _kBottomBorderHeight));
   
    class _DropDownMenuPainter extends CustomPainter {
   @@ -324,7 +324,6 @@ class DropDownMenuItem<T> extends StatelessWidget {
      Widget build(BuildContext context) {
        return new Container(
          height: _kMenuItemHeight,
   -      padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: new Baseline(
            baselineType: TextBaseline.alphabetic,
            baseline: _kMenuItemHeight - _kBaselineOffsetFromBottom,
   
9. Hixie commented on Jun 23, 2016

   

   Hixie

   on Jun 23, 2016

   Contributor

   More actions

   Pretty sure that should 0.0, not 1.0.
10. HansMuller

    closed this as completedin #4766on Jun 27, 2016
11. cdotstout

    added a commit that references this issue on Apr 3, 2018

    Fix unguarded availability warnings for iOS (flutter#4664)

    ...

    439edca
12. a7me63azzab commented on Jan 4, 2019

    

    a7me63azzab

    on Jan 4, 2019

    More actions

    How to remove the underline from DropDownButton ?
13. impratik commented on Jan 19, 2019

    

    impratik

    on Jan 19, 2019

    More actions

    How to remove the underline from DropDownButton ?
    Hi , Wrap your DropDownButton widget with DropdownButtonHideUnderline Widget to remove underline from DropDownButton .

    👍React with 👍19Reacted by Jrog, Xander Gottlieb, Alexey Dolya, Nie Ben, gitdefllo, rami965, Sajad Sohrabi, Teerapat Kraisrisirikul, victornett, Roberto Oliveira and 9 more

    🎉React with 🎉7Reacted by Montassar Attia, Alexey Dolya, Sajad Sohrabi, Roberto Oliveira, Kostia Vyrodov, Aneesh Jose and Ali Khan

    😕React with 😕1Reacted by dotnetaddicted

    ❤️React with ❤️10Reacted by Ahmed A. ElmenEm, Alexey Dolya, Renato Franceschinelli, victornett, Roberto Oliveira, Kostia Vyrodov, Aneesh Jose, Ali Khan, Naing and Hamid Shah

    🚀React with 🚀4Reacted by Aneesh Jose, Genius Coder, Ali Khan and Naing
14. a7me63azzab commented on Jan 20, 2019

    

    a7me63azzab

    on Jan 20, 2019

    More actions

    @impratik thanks
15. temirfe commented on Mar 29, 2019

    

    temirfe

    on Mar 29, 2019

    More actions

    DropdownButtonHideUnderline

    через ж*пу

    👍React with 👍6Reacted by Igor Kharakhordin, Kirill Molokov, Никита Ливадченко, Alisa, Leonid and dotnetaddicted
16. victornett commented on May 29, 2019

    

    victornett

    on May 29, 2019

    More actions

    How to remove the underline from DropDownButton ?
    Hi , Wrap your DropDownButton widget with DropdownButtonHideUnderline Widget to remove underline from DropDownButton .

    ty 🗡
17. HansMuller

    added

    frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

    on May 31, 2019
18. chirmac commented on Jun 14, 2019

    

    chirmac

    on Jun 14, 2019

    More actions

    How to remove the underline from DropDownButton ?
    Hi , Wrap your DropDownButton widget with DropdownButtonHideUnderline Widget to remove underline from DropDownButton .

    Thank you so much
19. ivantanakaa commented on Jun 19, 2019

    

    ivantanakaa

    on Jun 19, 2019

    More actions

    How to change the underline width from DropDownButton?
20. ikicodedev commented on Aug 21, 2019

    

    ikicodedev

    on Aug 21, 2019

    More actions

    How to remove the underline from DropDownButton ?

    You could also modify theunderline 'property of DropdownButton by passing it an empty container.

    underline: Container (),

    👍React with 👍4Reacted by Paritosh Bhatt, Abdul Wadood, Mahesh Suthar and Hassan Hammad
21. github-actions commented on Aug 28, 2021

    

    github-actionsBot

    on Aug 28, 2021

    More 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.
22. github-actions

    locked as resolved and limited conversation to collaborators on Aug 28, 2021