[Stepper] Add Alternative Label on horizontal-type Stepper #91496

KKimj · 2021-10-08T16:07:10Z

Add Alternative Label on horizontal-type Stepper

Linked issues

#91337

Before

Screenshots

Horizontal

### Vertical

[important!] Remained issues

Padding, Align

Up and down number-icon

Reproduce code

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Stepper Alternative Label',
      home: 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 Scaffold(
      body: Stepper(
        type: StepperType.horizontal,
        // type: StepperType.vertical,
        currentStep: _index,
        onStepCancel: () {
          if (_index > 0) {
            setState(() {
              _index -= 1;
            });
          }
        },
        onStepContinue: () {
          if (_index < 3) {
            setState(() {
              _index += 1;
            });
          }
        },
        onStepTapped: (int index) {
          setState(() {
            _index = index;
          });
        },
        steps: <Step>[
          Step(
            isActive: _index == 0,
            title: const Text('Step 1 title'),
            content: Container(
                alignment: Alignment.centerLeft,
                child: const Text('Content for Step 1')),
            label: const Text('Step 1'),
            subtitle: const Text('Step 1 subtitle'),
          ),
          Step(
            isActive: _index == 1,
            title: const Text('Step 2 title'),
            content: const Text('Content for Step 2'),
            subtitle: const Text('Step 2 subtitle'),
            label: const Text('Step 2'),
          ),
          Step(
            isActive: _index == 2,
            title: const Text('Step 3 title'),
            content: const Text('Content for Step 3'),
            subtitle: const Text('Step 3 subtitle'),
            label: const Text('Step 3'),
          ),
          Step(
            isActive: _index == 3,
            title: const Text('Step 4 title'),
            content: const Text('Content for Step 4'),
            subtitle: const Text('Step 4 subtitle'),
            label: const Text('Step 4'),
          ),
        ],
      ),
    );
  }
}

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

flutter-dashboard · 2021-10-08T16:23:25Z

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat.

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

KKimj · 2021-10-08T16:37:22Z

I will add new tests to check this PR

craiglabenz · 2021-10-08T23:43:48Z

Thanks for the confirmation on tests, @KKimj. If you're new to widget tests, the existing Stepper widget tests contain many great examples of meaningful tests :)

KKimj · 2021-10-09T09:29:25Z

@craiglabenz
Hello, I add new test for lable ( Alternative Label ) with stepper.
Please check, and give me some comments.
Thanks, HAGW!

KKimj · 2021-10-17T23:46:08Z

@craiglabenz

Hello
Can you please comment on my PR?
Thank you.

craiglabenz

Thanks so much for this PR, @KKimj :)

I left two comments, after which I think this will be good to go!

craiglabenz · 2021-10-18T16:02:53Z

packages/flutter/lib/src/material/stepper.dart

  /// Whether or not the step is active. The flag only influences styling.
  final bool isActive;
+
+  /// [label] appears under the number icon.


I think this docstring is slightly misleading, as the [label] appears under the [title], not under the number icon. I recommend we write:

/// Optional widget that appears under the [title]. By default, uses the `bodyText1` theme.

Thanks!
I resolved it.

Great! If we can now add another test to confirm the styling of the new elements, I think we'll be in good shape. (You can also add additional expect calls to your existing test.)

Hello,
Is it right design?

// ... late TextStyle captionStyle; // on `StatefulBuilder(builder: (BuildContext context, StateSetter setState) {` captionStyle = Theme.of(context).textTheme.caption!; // on List<Step> Step( title: const Text('Step 3 Title'), content: const Text('Step 3 Content'), subtitle: const Text('Step 3 Subtitle'), label: Text('Step 3 Label', style: Theme.of(context).textTheme.caption), ), // ... final Text label3Text = tester.widget<Text>(find.text('Step 3 Label')); expect(captionStyle, label3Text.style);

Thanks!

The lines that feel important to test (IMO) are those in _labelStyle, which make slight alterations to the TextTheme based on the state of the given step.

There are _titleStyle, _subtitleStyle, _labelStyle methods, in order to indicate state of Step with TextStyles.

Thanks!

@craiglabenz
Would you give me some comments?
Thanks!

@craiglabenz
Would you change to status resolved?
Thanks!

craiglabenz · 2021-10-18T16:05:35Z

packages/flutter/test/material/stepper_test.dart

+    // Tap to Step2 Label then, index become 1 from 2
+    await tester.tap(find.text('Step 2 Label'));
+    expect(index, 1);
+  });


This is a good test! However, I think it would be nice to add another one that confirms the styling logic you've written is behaving as anticipated. There are quite a few good examples in this file for Button Themes, and should be portable to confirm the styling of Text widgets.

@craiglabenz
Hello..! It's been so long. How have you been?

I pushed a commit for test about TextStyles of Label Widget.

Please Review my commit.
Thanks!

@craiglabenz
Would you change to status resolved?
Thanks!

KKimj · 2021-11-13T16:22:15Z

@craiglabenz
Hello, how are you doing?
Can you give me a new feedback?
Thank you.

craiglabenz · 2022-01-26T22:25:24Z

@KKimj

I am So. So. sorry for disappearing for so long. Somehow, the alert for this PR snuck past me and I never caught it.

In my last comment, I wrote "it would be nice to add another one that confirms the styling logic you've written is behaving as anticipated", which I now realize was a little unclear. The key function I would like to see tested is _labelStyle, since it accepts an index and merges that with the user's progress through the stepper and the Dark Mode / Light Mode status before ultimately yielding a TextStyle. The internals of that function are pretty complicated, so I think we should have tests to verify that a Stepper with X steps, and currently at step Y, is rendering each label correctly. There are a few scenarios to cover there - steps before, on, and after the active step; in both light mode and dark mode.

Does all of that make sense?

PS - I promise not to disappear this time!

KKimj · 2022-01-31T03:47:20Z

Hello!! LTNS!!
I understand what you say.

I will update test-codes soon.
Something like below.

Let, X := currentStepIndex, Y := arbitraryStepIndex (except current)

set X = 0.
Check Styles of X and Y.
set X = 1.
Invoke setState().
Check Styles of X and Y.

P.S
Happy New Year!

craiglabenz · 2022-01-31T04:06:52Z

Yes, that looks like the right pseudocode. Thanks so much and 🌔 Happy New Year 🌔 to you, too!

Hixie · 2022-04-19T23:10:37Z

@KKimj Is this a PR you are interested in doing further work on? It's perfectly understandable if you don't have time right now, and if that's the case we can save what you've done so far and put it aside so that if someone else wants to work on this they can start from your PR. But if you do have the time to work on this, that would be great!

KKimj · 2022-04-19T23:15:24Z

@Hixie
Hello!
I always had it in mind. I want to finish all the work within April. How does that sound?

KKimj · 2022-04-21T09:23:50Z

@craiglabenz
Hello..! It's been so long. How have you been?

I pushed a commit for test about TextStyles of Label Widget.

Please Review my commit.
Thanks!

craiglabenz · 2022-04-22T16:25:16Z

That test looks good, @KKimj. However, I just tested the code myself directly, and the padding / alignment issue does still seem to be in play. Is this something you're also looking to address?

KKimj · 2022-04-25T15:41:43Z

@craiglabenz
Hello!

Now I realize again that there is no alternative label in the Vertical type, StepperType.vertical.

https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers

Anyway, I found a way to solve the padding / alignment issue.
The method is to modify the function '_buildVerticalHeader', forcing width to 24.0, according to the Material Guide.

Code diff here, (It was not pushed.)
An example UI can be similar to the following.

But it's too cramped, and as I said above, it's dubious because `alternative label` is not in the Vertical type. I'd like to ask for advice on how to do it.

Thanks, Have a good day!

KKimj · 2022-06-06T16:57:07Z

@craiglabenz
Thanks!
It works!

…lutter/flutter#91496)

…1496) * Add label on Step * Add _buildLabelText, _labelStyle * Update _buildHorizontal with _buildLabelText * Fix Redundant Center widgets * Fix Unnecessary Column Widget * Fix Unnecessary import * Fix Unnecessary Container * Set label style to bodyText1 to match title style * Update test for Alternative Label * Fix code format * Update label docstring * Update to test textstyle of label * Update to Test `TextStyles` of Label * Fix typo in inline comments * Update for Stepper type to `horizontal` * Restore `_buildVerticalHeader` * Update docstring, `Only [StepperType.horizontal]` * Update for Readability * Add `_isLabel` method * Update `Horizontal height` with `_isLabel` * Update to make `_buildIcon` centered * Fix for `curly_braces_in_flow_control_structures`

…lutter/flutter#91496)

Adding my name (Kim Jiun) to Authors. REF : #91496 Thanks!

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Oct 8, 2021

google-cla bot added the cla: yes label Oct 8, 2021

KKimj changed the title ~~Stepper alternative label~~ [Stepper] Add Alternative Label Oct 8, 2021

KKimj marked this pull request as ready for review October 8, 2021 16:23

HansMuller requested a review from craiglabenz October 8, 2021 21:48

craiglabenz requested changes Oct 18, 2021

View reviewed changes

KKimj requested review from Piinks, christopherfujino, jmagman and keyonghan as code owners April 25, 2022 15:47

google-cla bot added cla: no and removed cla: yes labels Apr 25, 2022

KKimj force-pushed the stepper-alternative-label branch from 8cfc16d to bbc79c6 Compare April 25, 2022 15:49

google-cla bot added cla: yes and removed cla: no labels Apr 25, 2022

KKimj and others added 6 commits June 7, 2022 00:52

Update docstring, Only [StepperType.horizontal]

77ace38

Update for Readability

e51c466

Add _isLabel method

e489e42

Update Horizontal height with _isLabel

ed9ed88

Update to make _buildIcon centered

12ceba8

Fix for curly_braces_in_flow_control_structures

60586fc

KKimj force-pushed the stepper-alternative-label branch from c04e782 to 60586fc Compare June 6, 2022 15:53

craiglabenz merged commit a939d9d into flutter:master Jun 6, 2022

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 1b2ee411aa13 to be0c1bd0f0ce (23 revisions) flutter/plugins#5929

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

60346df

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to be0c1bd0f0ce (213 revisions) flutter/packages#2214

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

3dae13d

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 78a0111c2093 (214 revisions) flutter/packages#2215

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

531cf2f

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 907529879f93 (215 revisions) flutter/packages#2216

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

1768393

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 3eaa4b27e413 (216 revisions) flutter/packages#2217

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

24200a1

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 3f9ec41626c1 (217 revisions) flutter/packages#2218

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

989851f

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 4b4c876fb9e9 (218 revisions) flutter/packages#2220

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

c15200a

…lutter/flutter#91496)

engine-flutter-autoroll mentioned this pull request Jun 7, 2022

Roll Flutter from 36fe51524f72 to 5ee59fa9ec15 (219 revisions) flutter/packages#2221

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 7, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

7d10826

…lutter/flutter#91496)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 30, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

30bd586

…lutter/flutter#91496)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Aug 30, 2022

a939d9d [Stepper] Add Alternative Label on horizontal-type Stepper (f…

77391d1

…lutter/flutter#91496)

KKimj mentioned this pull request Apr 18, 2023

Update to add Kim Jiun to AUTHORS #125026

Merged

8 tasks

auto-submit bot pushed a commit that referenced this pull request Apr 18, 2023

Update to add Kim Jiun to AUTHORS (#125026)

e2a2046

Adding my name (Kim Jiun) to Authors. REF : #91496 Thanks!

[Stepper] Add Alternative Label on horizontal-type Stepper #91496

[Stepper] Add Alternative Label on horizontal-type Stepper #91496

Uh oh!

Conversation

KKimj commented Oct 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Add Alternative Label on horizontal-type Stepper

Linked issues

Before

Screenshots

Horizontal

[important!] Remained issues

Reproduce code

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Oct 8, 2021

Uh oh!

KKimj commented Oct 8, 2021

Uh oh!

craiglabenz commented Oct 8, 2021

Uh oh!

KKimj commented Oct 9, 2021

Uh oh!

KKimj commented Oct 17, 2021

Uh oh!

craiglabenz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KKimj Oct 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KKimj Oct 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KKimj Jun 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KKimj commented Nov 13, 2021

Uh oh!

craiglabenz commented Jan 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KKimj commented Jan 31, 2022

Uh oh!

craiglabenz commented Jan 31, 2022

Uh oh!

Hixie commented Apr 19, 2022

Uh oh!

KKimj commented Apr 19, 2022

Uh oh!

KKimj commented Apr 21, 2022

Uh oh!

craiglabenz commented Apr 22, 2022

Uh oh!

KKimj commented Apr 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KKimj commented Jun 6, 2022

Uh oh!

Reviewers

Assignees

KKimj commented Oct 8, 2021 •

edited

Loading

KKimj Oct 19, 2021 •

edited

Loading

KKimj Oct 20, 2021 •

edited

Loading

KKimj Jun 4, 2022 •

edited

Loading

craiglabenz commented Jan 26, 2022 •

edited

Loading

KKimj commented Apr 25, 2022 •

edited

Loading