Skip to content

Conversation

@ayyoub-coder
Copy link
Contributor

Fix Vertical Stepper Line Interruption by Content

This PR addresses an issue where the vertical stepper line is interrupted by its content (#160156).

Problem

  • ColoredBox Behavior: When used, ColoredBox requires wrapping it with a SizedBox, as SizedBox defaults to a zero size when no dimensions are specified.
  • This behavior leads to unexpected layout inconsistencies unless explicitly addressed.
  • Container Comparison: Unlike SizedBox, Container automatically expands to fit its parent's constraints, resulting in a more intuitive layout.

Solution

  • Ensure a consistent layout behavior by addressing the size handling when SizedBox is used.
  • Container automatically expands to fit its parent's constraints.

Related Issue

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Dec 12, 2024
@flutter-dashboard
Copy link

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!).

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. The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group.

Copy link
Contributor

@nate-thegrate nate-thegrate left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ayyoub-coder thank you so much!

Unfortunately I didn't notice you'd contributed a fix before I started working on it myself.

I have a slight preference toward avoiding Container objects, but I also appreciate the effort you put into this fix. I've opened #160193, but we can merge your change instead if you add a regression test and make sure all checks are passing.

Thanks again!

@ayyoub-coder
Copy link
Contributor Author

@ayyoub-coder thank you so much!

Unfortunately I didn't notice you'd contributed a fix before I started working on it myself.

I have a slight preference toward avoiding Container objects, but I also appreciate the effort you put into this fix. I've opened #160193, but we can merge your change instead if you add a regression test and make sure all checks are passing.

Thanks again!

@nate-thegrate Thank you for reviewing my PR and providing valuable feedback!

I noticed the test you authored in PR #160193 for verifying the connector line in the vertical Stepper widget.
It’s a fantastic contribution and aligns seamlessly with the changes I’m implementing, so I’ve included your test in my PR.

Thanks again for your great work!

@nate-thegrate
Copy link
Contributor

Thanks again @ayyoub-coder for your fantastic contribution!
I'm ashamed to go back on my word, but I think it's most likely that #160193 will be merged instead of this one, for a couple of reasons:

  1. Per the Tree Hygiene page, contributions from those without commit access need 2 approvals before they can be merged, which means we'd need to continue putting resources into this fix.
  2. Container is a kind of "heavy" class, with 11 fields and a beefy build method. At a bare minimum, it builds a ConstrainedBox wrapped with a LimitedBox, which is more expensive than render object widgets (they don't "build" anything).

Visual representation of number 2:

// this PR
PositionedDirectional
└── SizedBox
    └── Center
        └── ConstrainedBox
            └── ColoredBox
                └── LimitedBox
                    └── ConstrainedBox

// other PR
PositionedDirectional
└── Center
    └── SizedBox
        └── ColoredBox

The good first issue label might be worth checking out—next time you open a pull request, feel free to @ me and I'll make it a priority to help you get it to the finish line :)

github-merge-queue bot pushed a commit that referenced this pull request Dec 13, 2024
@ayyoub-coder gave a fantastic summary of the problem in #160177: if a
`Container` doesn't have a child or unbounded constraints, it will
expand to fill its parent, whereas a `ColoredBox` defaults to zero size.

I also noticed that in the main branch, the `PositionedDirectional`
widget has an unused `width` parameter, and instead builds a `SizedBox`
child for it.

This pull request cleans up the `Stepper` subtree a bit and allows the
connector to display properly.

fixes #160156
@ayyoub-coder
Copy link
Contributor Author

Thank you so much for your kind words and detailed explanation, @nate-thegrate! I really appreciate the time and effort you’ve put into reviewing my PR and providing such insightful feedback.

I completely understand the rationale for moving forward with #160193—it’s a more efficient and streamlined approach. While I’m a bit disappointed that this PR won’t be merged, I’m grateful for the learning experience and the chance to contribute.

I’ll definitely explore the "good first issue" label and take you up on your generous offer to help with my next PR. It means a lot to know that you’re willing to support and guide me through future contributions.

Thanks again for everything! I look forward to collaborating with you on future Flutter improvements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Vertical stepper line is interrupted by its content

2 participants