Customize color and thickness of connected lines in Stepper.dart #122485

mub-pro · 2023-03-12T06:06:37Z

Hi, I added the ability to customize the color of the connected lines in Stepper.dart, also the circle's color will match the set value of the connector color.

Before

After

fixes #37229

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.

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

mub-pro · 2023-03-26T23:22:41Z

@HansMuller Can you please review this PR?

HansMuller · 2023-03-27T22:44:24Z

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

  }

-  Widget _buildLine(bool visible) {
+  Color _connectorColor(bool isActive) {


If widget.connectorColor resolves to null, then we should use the default colors:

final ColorScheme colorScheme = Theme.of(context).colorScheme; final Set<MaterialState> states = <MaterialState>{ if (isActive) MaterialState.selected else MaterialState.disabled, }; return widget.connectorColor?.resolve(states) ?? isActive ? colorScheme.primary : Colors.grey.shade400;

A test should confirm this.

if(widget.connectorColor == null) { return isActive ? colorSchema.primary : Colors.grey.shade400; }

this code set colors to default if connectorColor is null

That fails if connectorColor is non-null but connectorColor.resolve(states) returns null. Please see https://github.com/flutter/flutter/pull/122485/files#r1149856878

HansMuller · 2023-03-27T22:48:35Z

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


  Color _circleColor(int index) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
+    if (widget.connectorColor != null) {


Same feedback as for _connectorColor

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

…dVerticalHeader

mub-pro · 2023-03-28T19:00:01Z

@HansMuller I uploaded the new changes, you can check them.

HansMuller · 2023-03-28T20:09:53Z

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

+    if(widget.connectorColor?.resolve(states) != null) {
+      return widget.connectorColor!.resolve(states);
    } else {
-      return widget.steps[index].isActive ? colorScheme.secondary : colorScheme.background;
+      if (!_isDark()) {
+        return widget.steps[index].isActive ? colorScheme.primary : colorScheme.onSurface.withOpacity(0.38);
+      } else {
+        return widget.steps[index].isActive ? colorScheme.secondary : colorScheme.background;
+      }
    }


final Color? color = widget.connectorColor?.resolve(states);
if (color != null) {
return color;
}
final bool isActive = widget.steps[index].isActive;
if (!_isDark()) {
return isActive ? colorScheme.primary : colorScheme.onSurface.withOpacity(0.38);
}
return sActive ? colorScheme.secondary : colorScheme.background;

it's clear now, though isActive has to be at the top because it's used in states variable.

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

For consistency with the rest of Flutter renamed colorSchema to colorScheme

HansMuller · 2023-03-28T22:15:45Z

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

+    final Set<MaterialState> states = <MaterialState>{
+      if (isActive) MaterialState.selected else MaterialState.disabled,
+    };
+    return widget.connectorColor?.resolve(states) ?? (isActive ?colorScheme.primary:Colors.grey.shade400);


This doesn't appear to be backwards compatible. It looks like the color was unconditionally Colors.grey.shade400. That would explain the customer testing failures.

but active lines won't be colorized,

Color _connectorColor(bool isActive) { final ColorScheme colorScheme = Theme.of(context).colorScheme; final Set<MaterialState> states = <MaterialState>{ if (isActive) MaterialState.selected else MaterialState.disabled, }; final Color? connectorColor = widget.connectorColor?.resolve(states); if(connectorColor != null) { return connectorColor; } return isActive ? colorScheme.primary : Colors.grey.shade400; }

what do you think about code above?

or maybe like this

final Color? connectorColor = widget.connectorColor?.resolve(states); if(connectorColor == null) { return isActive ? colorScheme.primary : Colors.grey.shade400; } return connectorColor;

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

HansMuller · 2023-03-29T16:05:28Z

@mub-pro - please merge the stepper changes after pulling the changes I've landed into your repo with something like:

git fetch origin
git pull origin your_branchName

mub-pro · 2023-03-30T01:19:29Z

@HansMuller I think I messed up the branch history 😟
what do you recommend to solve this problem?

mub-pro · 2023-03-30T03:56:22Z

@HansMuller I think I messed up the branch history 😟 what do you recommend to solve this problem?

I did git reset and forced push, I think it's working.

What happened before is some kind of wrong way of git rebase command done by me that makes commits get duplicated and the number of files that were changed increased which I did not touch.

mub-pro · 2023-04-02T21:42:47Z

@HansMuller any updates?

HansMuller

This looks good. Unfortunately I'm going to be out for a week. I will try and land it when I return.

HansMuller

LGTM

…art (flutter/flutter#122485)

Manual roll requested by [email protected] flutter/flutter@50171bb...15cb1f8 2023-04-17 [email protected] Fix Chip highlight color isn't drawn on top of the background color (flutter/flutter#124673) 2023-04-17 [email protected] Deprecates string for reorderable list in material_localizations (flutter/flutter#124711) 2023-04-17 [email protected] Fix a null crash in SelectableRegion Widget (flutter/flutter#124736) 2023-04-17 [email protected] Customize color and thickness of connected lines in Stepper.dart (flutter/flutter#122485) 2023-04-17 [email protected] Roll Flutter Engine from 30e1c4308213 to b2d07388ceb6 (7 revisions) (flutter/flutter#124987) 2023-04-17 [email protected] Remove token permissions for coverage. (flutter/flutter#124909) 2023-04-17 [email protected] Roll Packages from e4ec155 to 0277f2a (9 revisions) (flutter/flutter#124972) 2023-04-17 [email protected] Roll Flutter Engine from 360ca05311c8 to 30e1c4308213 (3 revisions) (flutter/flutter#124963) 2023-04-17 [email protected] Roll Flutter Engine from 4a998b73a2df to 360ca05311c8 (2 revisions) (flutter/flutter#124952) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Pascalpex · 2024-02-28T10:04:38Z

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

            width: 24.0,
            child: Center(
              child: SizedBox(
-                width: _isLast(index) ? 0.0 : 1.0,


Can someone please tell me why the _isLast check was removed here?

mub-pro added 4 commits March 10, 2023 17:06

styling steps connector in Stepper.dart

028ff93

test stepper connector color

4e16936

add detailed docs in connectorColor

013cef2

order _connectorColor method

d256a89

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Mar 12, 2023

mub-pro changed the title ~~Fix/37229~~ Customize color and thickness of connected lines in Stepper.dart Mar 12, 2023

dhruvinnv reviewed Mar 12, 2023

View reviewed changes

packages/flutter/lib/src/material/stepper.dart Outdated Show resolved Hide resolved

danielroek reviewed Mar 13, 2023

View reviewed changes

packages/flutter/lib/src/material/stepper.dart Outdated Show resolved Hide resolved

set default connectorThickness to 1.0

bb8e25e

mub-pro force-pushed the fix/37229 branch from b2149e7 to e522204 Compare March 16, 2023 19:48

Merge branch 'master' of github.com:flutter/flutter into fix/37229

439c041

mub-pro force-pushed the fix/37229 branch from fb54c29 to 439c041 Compare March 16, 2023 20:27

mub-pro and others added 2 commits March 16, 2023 23:56

remove unnecessary spaces

54fad4c

Merge branch 'master' into fix/37229

8a3d83f

HansMuller self-requested a review March 17, 2023 17:44

HansMuller reviewed Mar 27, 2023

View reviewed changes

mub-pro added 3 commits March 28, 2023 04:16

set default connectorThickness to null, compute isActive one in _buil…

9025221

…dVerticalHeader

Merge branch 'fix/37229' of github.com:mub-pro/flutter into fix/37229

8a8a3d1

use default colors when resolves to null

daf4fd3

HansMuller reviewed Mar 28, 2023

View reviewed changes

refactoring _cirleColor method

fa0cca0

HansMuller reviewed Mar 28, 2023

View reviewed changes

packages/flutter/lib/src/material/stepper.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/stepper.dart Outdated Show resolved Hide resolved

HansMuller and others added 2 commits March 28, 2023 15:07

Apply suggestions from code review

94dad30

For consistency with the rest of Flutter renamed colorSchema to colorScheme

Merge branch 'master' into fix/37229

2170f71

HansMuller reviewed Mar 28, 2023

View reviewed changes

packages/flutter/lib/src/material/stepper.dart Outdated Show resolved Hide resolved

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

4ca90b0

HansMuller reviewed Mar 28, 2023

View reviewed changes

packages/flutter/lib/src/material/stepper.dart Show resolved Hide resolved

HansMuller and others added 2 commits March 28, 2023 16:01

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

028f551

Merge branch 'master' into fix/37229

ed3d09b

mub-pro force-pushed the fix/37229 branch from 9b8bc80 to ed3d09b Compare March 30, 2023 03:54

mub-pro and others added 4 commits April 1, 2023 03:03

set isActive to default

c497b1f

update stepper_test

2829ca7

Merge remote-tracking branch 'upstream/master' into fix/37229

1dcf4d1

Merge branch 'master' into fix/37229

b6f8559

mub-pro requested a review from HansMuller April 7, 2023 22:22

Merge branch 'master' into fix/37229

2e05959

HansMuller reviewed Apr 7, 2023

View reviewed changes

HansMuller added 2 commits April 17, 2023 10:00

Merge branch 'master' into fix/37229

57395b7

Merge branch 'master' into fix/37229

4f35914

HansMuller approved these changes Apr 17, 2023

View reviewed changes

HansMuller merged commit df8d819 into flutter:master Apr 17, 2023

engine-flutter-autoroll mentioned this pull request Apr 17, 2023

Manual roll Flutter from 50171bbae357 to 15cb1f84d726 (9 revisions) flutter/packages#3749

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 17, 2023

df8d819 Customize color and thickness of connected lines in Stepper.d…

57f7382

…art (flutter/flutter#122485)

This was referenced Apr 20, 2023

i123636 android embedding v2 agp gradle kotlin update #125256

Closed

[integration_test] add support for agp8.0 #125310

Closed

HansMuller mentioned this pull request Apr 21, 2023

Flutter Framework Team: Notable Commits #121415

Closed

reidbaker mentioned this pull request Apr 21, 2023

Test AGP 8.0 using java 17 #125323

Merged

8 tasks

Pascalpex reviewed Feb 28, 2024

View reviewed changes

TahaTesser mentioned this pull request Mar 25, 2024

Vertical stepper shows line after last step #144376

Closed

Customize color and thickness of connected lines in Stepper.dart #122485

Customize color and thickness of connected lines in Stepper.dart #122485

Conversation

mub-pro commented Mar 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

Uh oh!

Uh oh!

mub-pro commented Mar 26, 2023

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!

Uh oh!

Uh oh!

mub-pro commented Mar 28, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mub-pro Mar 29, 2023 • 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!

Uh oh!

Uh oh!

HansMuller commented Mar 29, 2023

Uh oh!

mub-pro commented Mar 30, 2023

Uh oh!

mub-pro commented Mar 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mub-pro commented Apr 2, 2023

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mub-pro commented Mar 12, 2023 •

edited

Loading

mub-pro Mar 29, 2023 •

edited

Loading

mub-pro commented Mar 30, 2023 •

edited

Loading