Skip to content

[Proposal] Revamp Border / Add Multiple Border Width #109954

@bernaferrari

Description

@bernaferrari

Right now, Border is inconsistent, hard to use, and different from all the other borders. I found a way to improve it, but it is not a 100% win/win scenario (hence, the proposal).

The ideas I've had were: add BorderSide.only (most shapes except path-based like Star would work, no breaking changes). Hixie didn't like the idea because of naming, side is supposed to be one side, not multiple sides, what should have multiple borders is the Border). So, my new proposal is refactoring Border. This is the design document I wrote underlying the importance and possibilities.

image

I have an implementation done for both ideas (bernaferrari#5). Right now, I'm more focused on the Border idea, as I think it has a better chance of landing in Flutter. Border API is inconsistent:

// Currently:
Border.all(width: 3, color: Colors.white)
Border(left: BorderSide(width: 3, color: Colors.white))

// Proposal:
Border.all(width: 3, color: Colors.white)
Border(leftWidth: 3, color: Colors.white)

// Alternative proposal (.only is not currently used):
Border.only(leftWidth: 3, color: Colors.white)

Besides, there are multiple ways it can throw errors, which is definitely not user friendly:

// StrokeAlign must be the same.
Border(left: BorderSide(width: 5, strokeAlign: 1), right: BorderSide(width: 5, strokeAlign: 2))

// BorderRadius must be null.
BoxDecoration(radius: BorderRadius.circular(16), border: Border())

// Shape must be rectangle.
BoxDecoration(shape: BoxShape.circle, border: Border())

There are two uncertainties:

  • Is it worth removing the option for individual colors? I believe the answer is yes.
  • Should Border also have a borderRadius parameter? I think so, overriding the BoxDecoration if both are given. Having its borderRadius would make it useful in ShapeDecoration and lerp.

While the Border refactor requires deprecating half the Border class, it is not breaking. We can have @Deprecated left while we add double leftWidth. For simplicity, in my draft, I named the new Border as BorderProposal (bernaferrari#5).

--
cc: hey @gspencergoog, would you like to help me with this feature? It is kind of riskier than the others, but you are the only one I know that likes these things I think we might be able to do something nice that improves the framework (again). The implementation is mostly done, depending on the path we take, the biggest challenge is convincing ourselves and the others this is worth doing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions