Skip to content

feat(border): add dashed and dotted borderStyle for container widgets - #2356

Merged
sharjeelyunus merged 1 commit into
mainfrom
border-customization
Aug 27, 2026
Merged

feat(border): add dashed and dotted borderStyle for container widgets#2356
sharjeelyunus merged 1 commit into
mainfrom
border-customization

Conversation

@sharjeelyunus

Copy link
Copy Markdown
Member

Description

Adds a borderStyle style property for container-based widgets (Row, Column, Flex*, and other BoxWrapper widgets) so borders can be solid, dashed, or dotted. This unblocks UI patterns like dashed drop zones without changing existing solid border behavior.

Related Issue

Fixes #2347

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Refactoring (no functional changes)

What Has Changed

  • Added BorderStyleComposite (type, length, gap) on BoxController and HasBorderController
  • Added DashedBoxBorder to paint dashed/dotted outlines (including borderRadius)
  • Updated BoxWrapper / EnsembleBoxWrapper to resolve solid vs dashed/dotted vs gradient borders
  • Defaults: unset/solid keeps existing behavior; length defaults to 5, gap defaults to 3

Example:

Column:
  styles:
    borderWidth: 2
    borderColor: 0xff276ef1
    borderStyle:
      type: dashed
      length: 5
      gap: 4

How to Test

  1. Create a Column/Row with borderWidth, borderColor, and borderStyle.type: solid — confirm solid border (same as before).
  2. Set borderStyle.type: dashed with optional length / gap — confirm dashed border.
  3. Set borderStyle.type: dotted — confirm dotted border.
  4. Add borderRadius with dashed/dotted — confirm corners follow the radius.
  5. Omit borderStyle — confirm existing solid border behavior is unchanged.

Screenshots / Videos

Checklist

  • I have run flutter analyze and addressed any new warnings
  • I have run flutter test and all tests pass
  • I have tested my changes on the relevant platform(s)
  • I have updated documentation if needed
  • My changes do not introduce new warnings or errors

…r and BoxController

- Introduced BorderStyleComposite to manage border styles (solid, dashed, dotted).
- Updated BoxWrapper and EnsembleBoxWrapper to utilize a new _resolveBoxBorder function for border rendering.
- Enhanced BoxController to include borderStyle property and corresponding setter.
- Implemented DashedBoxBorder class for rendering dashed and dotted borders.
@sharjeelyunus sharjeelyunus self-assigned this Aug 27, 2026
@sharjeelyunus
sharjeelyunus requested a review from M-Talha4 August 27, 2026 13:42
@sharjeelyunus sharjeelyunus added the enhancement New feature or request label Aug 27, 2026
@sharjeelyunus sharjeelyunus changed the title Adds a borderStyle style property for container-based widgets (Row, Column, Flex*, and other BoxWrapper widgets) so borders can be solid, dashed, or dotted. This unblocks UI patterns like dashed drop zones without changing existing solid border behavior. feat(border): add dashed and dotted borderStyle for container widgets Aug 27, 2026
@sharjeelyunus
sharjeelyunus merged commit 26d747e into main Aug 27, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Dotted and Dashed Border Styles for Container-Based Widgets

2 participants