[Stepper]Circle size and connecting lines between icons are not customizable #103124

Activity

1. maheshj01

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on May 5, 2022
2. maheshj01 commented on May 5, 2022

   

   maheshj01

   on May 5, 2022

   Last edited by maheshj01

   Member

   More actions

   Hi @aakashawalkar, Have you tried wrapping the Stepper in a theme and changing primary Color and iconsize? Also regarding the connecting lines is it about the spacing?

   import 'package:flutter/material.dart';
   
   void main() => runApp(const MyApp());
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     static const String _title = 'Flutter Code Sample';
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: _title,
         home: Scaffold(
           appBar: AppBar(title: const Text(_title)),
           body: const Center(
             child: MyStatefulWidget(),
           ),
         ),
       );
     }
   }
   
   class MyStatefulWidget extends StatefulWidget {
     const MyStatefulWidget({Key? key}) : super(key: key);
   
     @override
     State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
   }
   
   class _MyStatefulWidgetState extends State<MyStatefulWidget> {
     int _index = 0;
   
     @override
     Widget build(BuildContext context) {
       return Theme(
         data: Theme.of(context).copyWith(
             colorScheme:
                 Theme.of(context).colorScheme.copyWith(primary: Colors.green),
             iconTheme: Theme.of(context).iconTheme.copyWith(size: 32.0)),
         child: Stepper(
           currentStep: _index,
           onStepCancel: () {
             if (_index > 0) {
               setState(() {
                 _index -= 1;
               });
             }
           },
           onStepContinue: () {
             if (_index <= 0) {
               setState(() {
                 _index += 1;
               });
             }
           },
           onStepTapped: (int index) {
             setState(() {
               _index = index;
             });
           },
           steps: <Step>[
             Step(
               isActive: true,
               title: const Text('Step 1 title'),
               content: Container(
                   alignment: Alignment.centerLeft,
                   child: const Text('Content for Step 1')),
             ),
             const Step(
               title: Text('Step 2 title'),
               content: Text('Content for Step 2'),
             ),
           ],
         ),
       );
     }
   }
   
3. maheshj01

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 5, 2022
4. aakashawalkar commented on May 5, 2022

   

   aakashawalkar

   on May 5, 2022

   Last edited by aakashawalkar

   Author

   More actions

   Hi @maheshmnj - Yes, I tried changing size of icon by wrapping Stepper widget into Theme() but it didn't changed size of stepper icon.

   Actually, I went to look the code inside the package (source code) and I noticed that the icon size is hardcoded to 24.0 and for connecting lines there is predefined margin from start of 12.0 which is also hardcoded for horizontal stepper type.

   👍React with 👍1Reacted by sneha-steam-a
5. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 5, 2022
6. maheshj01 commented on May 6, 2022

   

   maheshj01

   on May 6, 2022

   Member

   More actions

   Thanks for the confirmation @aakashawalkar, I can reproduce the issue the circle size and the lines are not customizable, Labeling this issue as a new feature request.
7. maheshj01

   added

   c: new featureNothing broken; request for a new capabilityNothing broken; request for a new capability

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

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

   c: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutter

   and removed

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on May 6, 2022
8. maheshj01

   changed the title [-]Stepper Widget : Stepper icon size and connecting lines between icons are not customizable[/-] [+][Stepper]Circle size and connecting lines between icons are not customizable[/+] on May 6, 2022
9. AyushBherwani1998 commented on Mar 31, 2023

   

   AyushBherwani1998

   on Mar 31, 2023

   Member

   More actions

   @HansMuller would it make sense to provide a way to override the kStepSize to allow customization of Circle size and a param to override the default size of line? Happy to raise a PR, if it sounds good.
10. AhmadFalahian commented on Apr 18, 2023

    

    AhmadFalahian

    on Apr 18, 2023

    More actions

    Has this feature not been added yet?
11. fuadreza commented on Jun 24, 2023

    

    fuadreza

    on Jun 24, 2023

    More actions

    It's not available yet.. 🥲
12. 4 remaining items

    Load more
13. flutter-triage-bot

    added

    triaged-designTriaged by Design Languages teamTriaged by Design Languages team

    on Jul 8, 2023
14. dheerajv099 commented on Sep 11, 2023

    

    dheerajv099

    on Sep 11, 2023

    More actions

    @AyushBherwani1998 have you raised pull request??
15. AyushBherwani1998 commented on Sep 11, 2023

    

    AyushBherwani1998

    on Sep 11, 2023

    Member

    More actions

    Ah, it skipped from my head. I'll raise it by tomorrow, adding it in my TODOs.
16. vytautas-pranskunas- commented on Sep 21, 2023

    

    vytautas-pranskunas-

    on Sep 21, 2023

    More actions

    cannot imagine this issue still not resolved. On tabs this looks crazy...
    
17. lidissonhugo commented on Oct 4, 2023

    

    lidissonhugo

    on Oct 4, 2023

    More actions

    Tem previsão de quando vão implementar o kStepSize personalizável e o tamanho da barra dos steps personalizável também?
18. huycozy

    removed

    multiteam-retriage-candidate

    on Jan 2, 2024
19. HansMuller

    added

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    on Jan 10, 2024
20. auto-submit

    added a commit that references this issue on Jan 12, 2024

    Adds support for StepStyle visual property bundle to the Step widget (#…

    ...

    f40a99c
21. Mairramer commented on Oct 24, 2024

    

    Mairramer

    on Oct 24, 2024

    Contributor

    More actions

    @aakashawalkar Did this PR solve your problem?
22. Mairramer commented on Nov 1, 2024

    

    Mairramer

    on Nov 1, 2024

    Contributor

    More actions

    Fixed by #140825

    ❤️React with ❤️1Reacted by Tirth Patel
23. tirth-patel-nc commented on May 30, 2025

    

    tirth-patel-nc

    on May 30, 2025

    Last edited by tirth-patel-nc

    Member

    More actions

    I can confirm that issue has been fixed by #140825. Requested customisation is possible using these props: stepIconHeight, stepIconWidth, stepIconMargin. Closing as Fixed!
24. tirth-patel-nc

    closed this as completedon May 30, 2025
25. tirth-patel-nc

    added

    r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version

    on May 30, 2025
26. github-actions commented on Jun 13, 2025

    

    github-actionsbot

    on Jun 13, 2025 – with GitHub Actions

    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.
27. github-actions

    locked as resolved and limited conversation to collaborators on Jun 13, 2025