[Stepper] adds stepIconBuilder property

[AyushBherwani1998]

Description

Adds a new stepIconBuilder property in Stepper. The property can be used to add custom icon to step based on index or state. The property can be used for all the StepState except for StepState.error.

Fixes: #121108

Before:

After:

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.

[AyushBherwani1998]

@HansMuller gentle reminder for review

[HansMuller]

This looks like a good change. Two issues to resolve:

• Why not allow the developer to override the "icon" for the error state?
• To make it possible to override the default icons for a subset of the states:

typedef StepIconBuilder = Widget? Function(int stepIndex, StepState stepState);

and then only use the widget returned by stepIconBuilder if it's non-null; other use the default widget.

[AyushBherwani1998]

Why not allow the developer to override the "icon" for the error state?

The error state have a triangle which can't fit icon inside the paint area unless the icon is way too smaller, said that if Icon is bigger it will overflow the boundary of triangle which might cause opening of new issues by users.

To make it possible to override the default icons for a subset of the states:

For second point, I don't think it will work unless we add stepIconBuilder into Step instead of Stepper class. Since, it's inside Stepper, it will be always non nullable if user is overriding Icon for only a single StepState. Let me know your thoughts @HansMuller, happy to do changes.

[HansMuller]

This is what I was suggesting:

  Widget _buildCircleChild(int index, bool oldState) {
    final StepState state = oldState ? _oldStates[index]! : widget.steps[index].state;
    final bool isDarkActive = _isDark() && widget.steps[index].isActive;

    if (widget.stepIconBuilder != null) {
      final Widget? icon = widget.stepIconBuilder!(index, state);
      if (icon != null) {
        return icon;
      }
    }

    switch (state) {
      case StepState.indexed:
      case StepState.disabled:
        return Text(
          '${index + 1}',
          style: isDarkActive ? _kStepStyle.copyWith(color: Colors.black87) : _kStepStyle,
        );
      case StepState.editing:
        return Icon(
          Icons.edit,
          color: isDarkActive ? _kCircleActiveDark : _kCircleActiveLight,
          size: 18.0,
        );
      case StepState.complete:
        return Icon(
          Icons.check,
          color: isDarkActive ? _kCircleActiveDark : _kCircleActiveLight,
          size: 18.0,
        );
      case StepState.error:
        return const Text('!', style: _kStepStyle);
    }
  }

In this version it would be necessary to warn developers that if they override the error state icon they'll need to return a widget whose size is less than [whatever the size limits are].

[AyushBherwani1998]

Ah, got it. Make sense. To warn the developers, we can document the behavior in the docs of stepIconBuilder. I'll do the changes.

[HansMuller]

LGTM

[AyushBherwani1998]

Thanks for resolving the comments @HansMuller