Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
61 commits
Select commit Hold shift + click to select a range
5ff97dc
Added the Tv navigation support
TheNoumanDev Mar 6, 2026
370e028
Merge branch 'main' into android_TV_implementation
TheNoumanDev Mar 6, 2026
aea5ef4
chore(release): publish packages
TheNoumanDev Mar 6, 2026
ac926c6
merged main and resolved conflicts
TheNoumanDev Mar 27, 2026
96af6b0
chore(release): publish packages
TheNoumanDev Mar 27, 2026
0ccfcfc
FIxed vertical jerk issue
TheNoumanDev Mar 29, 2026
1da8810
chore(release): publish packages
TheNoumanDev Mar 29, 2026
30b28fa
Add lockHorizontalNavigation and scroll animation options for TV
TheNoumanDev Apr 6, 2026
59a05bc
Merge branch 'main' into android_TV_implementation
TheNoumanDev Apr 6, 2026
7fd5f77
fixed controller file
TheNoumanDev Apr 6, 2026
b9e7bc4
chore(release): publish packages
TheNoumanDev Apr 6, 2026
39fc3dd
Merge main into android_TV_implementation
TheNoumanDev Apr 17, 2026
2083fab
enhance TV focus navigation with delegate options and autoplay controls
TheNoumanDev Apr 22, 2026
3808021
chore(release): publish packages
TheNoumanDev Apr 23, 2026
8b916eb
fixed the scrolling issue and the focus border issues
TheNoumanDev May 20, 2026
cdfd4b2
chore(release): publish packages
TheNoumanDev May 20, 2026
ca53846
added the styling for focused state of button and wrapper widgets
TheNoumanDev May 22, 2026
f21318d
chore(release): publish packages
TheNoumanDev May 22, 2026
ed557c4
merged main and resolved conflicts
TheNoumanDev Jun 3, 2026
9fe6ea2
Merge remote android_TV_implementation branch
TheNoumanDev Jun 3, 2026
992bda6
added teh scrollBar option to support focus
TheNoumanDev Jun 5, 2026
10c0ce9
updated the auto focus property
TheNoumanDev Jun 5, 2026
341f280
added docs for TV guide for now
TheNoumanDev Jun 5, 2026
abaaa8b
chore(release): publish packages
TheNoumanDev Jun 5, 2026
3ac9b0b
updated the tabbar implementation
TheNoumanDev Jun 22, 2026
71797aa
merged main and resolved conflicts
TheNoumanDev Jun 22, 2026
3c9125f
Merge branch 'main' into android_TV_implementation
TheNoumanDev Jun 22, 2026
6290dc3
chore(release): publish packages
TheNoumanDev Jun 22, 2026
476682d
Merge branch 'main' into android_TV_implementation
TheNoumanDev Jun 22, 2026
1306e97
chore(release): publish packages
TheNoumanDev Jun 22, 2026
933b158
chore(release): publish packages
github-actions[bot] Jun 23, 2026
7781d19
fix(tv): render custom tabWidget in TV tab bar buttons
Jun 30, 2026
75dce03
fix(tv): use viewport position instead of screen size for scroll visi…
Jun 30, 2026
b5bffcc
merged main and resolved conflicts
TheNoumanDev Jul 1, 2026
9c93ec9
chore(release): publish packages
github-actions[bot] Jul 1, 2026
fce9129
updated the padding in the tabbar
TheNoumanDev Jul 2, 2026
76759c8
Merge branch 'main' into android_TV_implementation
TheNoumanDev Jul 2, 2026
8da79c6
chore(release): publish packages
github-actions[bot] Jul 2, 2026
21b11df
merged main and resovled conflicts
TheNoumanDev Jul 6, 2026
aa70feb
added the brackets support to TV
TheNoumanDev Jul 7, 2026
9e44df7
chore(release): publish packages
github-actions[bot] Jul 7, 2026
cd2d7aa
fixed the focusColor property
TheNoumanDev Jul 12, 2026
d2b8650
optimized the code and updated the comments
TheNoumanDev Jul 13, 2026
6ca4bfb
updated the comments and optimizations
TheNoumanDev Jul 13, 2026
d640ad2
refactor: remove debug prints related to TV scrollbar handling and up…
TheNoumanDev Jul 13, 2026
355f7e7
docs: add comprehensive TV developer guide with navigation patterns, …
TheNoumanDev Jul 13, 2026
eadd38f
chore: update ensemble dependency references to version 1.2.49
TheNoumanDev Jul 13, 2026
08019f8
chore: clean up pubspec.yaml and update ensemble changelog
TheNoumanDev Jul 13, 2026
6fabd43
add section and edge support for tvOptions
usmanvrtx Jul 14, 2026
65746e3
replace the section with focus gourp and use edget properties with ta…
usmanvrtx Jul 14, 2026
720d598
refactor: remove deprecated section parameter and clean up focus grou…
usmanvrtx Jul 14, 2026
4af3474
refactor: update TVFocusEdgeTargetComposite to use target properties …
usmanvrtx Jul 14, 2026
a16bbf6
refactor: remove fallback for top and bottom inputs in TVFocusEdgesCo…
usmanvrtx Jul 14, 2026
b927f08
feat: implement edge navigation inhrit form parent
usmanvrtx Jul 15, 2026
d5fa96d
fix this focus lose issue on back navigation between groups
usmanvrtx Jul 15, 2026
8db667d
add primaryFocusNode to TV focus components for explicit focus handling
usmanvrtx Jul 15, 2026
55f437d
refactor: remove unused section parameter from _BracketTVFocusProvider
usmanvrtx Jul 15, 2026
9d946d0
Merge pull request #2323 from EnsembleUI/android-TV-edges-implementation
TheNoumanDev Jul 15, 2026
5b8fd8c
Merge branch 'main' into android_TV_implementation
TheNoumanDev Jul 15, 2026
2b90d67
refactor: enhance TVScrollbarWidget visibility handling and initializ…
TheNoumanDev Jul 15, 2026
f9990fb
refactor: add layout scale property for Bracket widget and enhance TV…
TheNoumanDev Jul 17, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 176 additions & 16 deletions modules/bracket/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ This is an optional Ensemble widget module. The package exports `lib/src/bracket
- Implements the Ensemble widget type `Bracket`.
- Supports round and match templates through `RoundTemplate` and `MatchTemplate`.
- Provides bracket rendering widgets and a custom painter for bracket connectors.
- Full TV/Android TV D-pad navigation support with customizable focus styling.

## Installation / Setup

Expand All @@ -28,35 +29,194 @@ The verified public import is:
import 'package:ensemble_bracket/ensemble_bracket.dart';
```

A complete Ensemble YAML example was not found in this package, so no YAML data shape is documented here.
### Basic YAML Example (Mobile/Web)

```yaml
Bracket:
id: bracket
styles:
scale: 0.75 # Layout scale (0.1 - 1.0)
borderColor: transparent
borderWidth: 2
lineStyles:
color: 0xff404040
width: 2
tabStyles:
backgroundColor: 0xFF232323
selectedBackgroundColor: 0xFF00C300
textStyle:
color: 0xFFB3B3B3
selectedTextStyle:
color: black
borderRadius: 8

items:
data: ${bracketData}
name: round
title: ${round.title}
item-template:
data: ${round.matches}
name: match
height: 100
template:
MatchCard:
inputs:
match: ${match}
```

### TV YAML Example (Android TV / D-pad)

```yaml
Bracket:
id: bracket
styles:
scale: 0.4 # Smaller scale for TV (more columns visible)
borderColor: transparent
borderWidth: 2
tvOptions:
row: 1 # TV: Tab row, matches start at row+1
lineStyles:
color: 0xff404040
width: 2
tabStyles:
backgroundColor: 0xFF232323
selectedBackgroundColor: 0xFF00C300
textStyle:
color: 0xFFB3B3B3
selectedTextStyle:
color: black
borderRadius: 8
focusBorderRadius: 12 # TV: Focus indicator radius

items:
data: ${bracketData}
name: round
title: ${round.title}
item-template:
data: ${round.matches}
name: match
height: 100
template:
MatchCard:
inputs:
match: ${match}
```

## Configuration

No additional configuration was found in this package.
### Bracket Properties

| Property | Type | TV | Description |
| ------------- | ------ | :-: | ------------------------------- |
| `borderColor` | Color | | Border color around match cards |
| `borderWidth` | Number | | Border width around match cards |

### Scale (`scale`)

| Property | Type | Description |
| -------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
| `scale` | Number | Layout scale (0.1 - 1.0, default: 0.75). Controls viewportFraction, card width, and connector length proportionally. |

### Line Styles (`lineStyles`)

| Property | Type | Description |
| -------- | ------ | -------------------------------- |
| `color` | Color | Color of bracket connector lines |
| `width` | Number | Width of bracket connector lines |

> **Note**: Vertical connector lines automatically scale based on card spacing when navigating between rounds, ensuring lines always connect properly at any scale.

### Tab Styles (`tabStyles`)

| Property | Type | TV | Description |
| -------------------------- | ---------- | :-: | --------------------------------------------- |
| `backgroundColor` | Color | | Background color of unselected tabs |
| `selectedBackgroundColor` | Color | | Background color of selected tab |
| `textStyle` | TextStyle | | Text style for unselected tabs |
| `selectedTextStyle` | TextStyle | | Text style for selected tab |
| `borderRadius` | Number | | Border radius of tabs |
| `borderColor` | Color | | Border color of tabs |
| `borderWidth` | Number | | Border width of tabs |
| `padding` | EdgeInsets | | Padding inside tabs |
| `gap` | Number | | Gap between tabs (default: 12) |
| `focusBorderColor` | Color | ✅ | Focus border color when navigating with D-pad |
| `focusBorderWidth` | Number | ✅ | Focus border width (default: 2.0) |
| `focusBorderRadius` | Number | ✅ | Focus border radius (default: 8.0) |
| `focusBackgroundColor` | Color | ✅ | Background color when focused |
| `focusTextStyle` | TextStyle | ✅ | Text style when focused |
| `focusAnimationDurationMs` | Number | ✅ | Focus animation duration in milliseconds |

### TV Options (`tvOptions`)

| Property | Type | TV | Description |
| -------- | ------ | :-: | ---------------------------------------------------------------------- |
| `row` | Number | ✅ | TV navigation row offset. Tabs are at this row, matches start at row+1 |

---

## TV D-pad Navigation

> **Note**: This section only applies to Android TV / TV devices with D-pad remote control.

### Focus Styling Priority Chain

The bracket widget follows the same focus styling priority as other Ensemble widgets:

1. **tabStyles focus properties** (e.g., `focusBorderColor`, `focusBorderWidth`)
2. **Theme** (`EnsembleThemeExtension.tvFocusTheme`)
3. **Provider** (`TVFocusProviderScope`)
4. **tabStyles regular properties** (e.g., `borderColor`, `borderWidth`)
5. **Default values** (focusBorderWidth: 2.0, focusBorderRadius: 8.0)

### Navigation Behavior

The bracket widget provides full TV D-pad navigation:

- **LEFT/RIGHT** arrows navigate between rounds (columns)
- **UP/DOWN** arrows navigate between matches within a round
- Focus automatically transfers to the corresponding row when changing rounds
- Row clamping ensures focus stays within available matches (e.g., 8 matches in Round of 16 → 4 matches in Quarter Finals)

### Match Card tvOptions

Match cards within the bracket should include `tvOptions` for focus styling:

```yaml
MatchCard:
body:
Column:
styles:
tvOptions:
row: 0 # Required for box_wrapper focus styling (actual row is set by bracket)
backgroundColor: 0xff303030 # Background when focused
```

Note: The `row` value is overridden by the bracket for navigation ordering, but must be present for box_wrapper to apply focus styling.

## Platform Support

| Platform | Supported | Notes |
| -------- | --------: | ----- |
| Android | Unknown | No Android project is included in this package; host app setup is required. |
| iOS | Unknown | No iOS project is included in this package; host app setup is required. |
| Web | Unknown | No web implementation was found in this package. |
| macOS | Unknown | No macOS project is included in this package. |
| Windows | Unknown | No Windows project is included in this package. |
| Linux | Unknown | No Linux project is included in this package. |
| Platform | Supported | Notes |
| -------- | --------: | ------------------------------------ |
| Android | ✅ | Full support including Android TV |
| iOS | ✅ | Full support |
| Web | ✅ | Full support |
| macOS | ✅ | Full support |
| Windows | ✅ | Full support |
| Linux | - | Not listed in pubspec.yaml platforms |

## Permissions

No runtime permissions were found in this package.

## API Reference

| API | Type | Description |
| --- | ---- | ----------- |
| `EnsembleBracketImpl` | Widget | Ensemble widget implementation for the `Bracket` type. |
| `BracketController` | Controller | Holds bracket properties and template configuration. |
| `RoundTemplate` | Template | Template model for rounds. |
| `MatchTemplate` | Template | Template model for matches. |
| API | Type | Description |
| --------------------- | ---------- | --------------------------------------------------------- |
| `EnsembleBracketImpl` | Widget | Ensemble widget implementation for the `Bracket` type. |
| `BracketController` | Controller | Holds bracket properties and template configuration. |
| `RoundTemplate` | Template | Template model for rounds. |
| `MatchTemplate` | Template | Template model for matches. |
| `RoundData` | Data | Resolved round data with title, matches, and local scope. |

## Development

Expand Down
Loading
Loading