Tinyrack

Tabs

Switch between content panels with a sliding selection indicator.

Switch between content panels with a sliding selection indicator.

Contract

AxisContract
WidthTRTabsWidth.fill is the default and divides the available strip. TRTabsWidth.fixed gives each tab TRMeasurements.measureSm logical pixels and scrolls when the tabs do not fit.
DraggingPass TRTabsDragConfiguration to opt in. TRTabDropDetails reports the source group, target group, tab value, and insertion index without mutating your list.

TRTabs uses one full-width strip with optional panels, closing, actions, and dragging. Use tabWidth: TRTabsWidth.fixed for document tabs that keep a measure-sm width; the default fills the strip. The application remains responsible for tab ownership and persistence.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRTabs(
  tabs: const [
    TRTabsTab(value: 'overview', label: 'Overview'),
    TRTabsTab(value: 'settings', label: 'Settings'),
  ],
  panelBuilder: buildPanel,
)

Examples

Sizes permalink

The tab bar scales with md and lg while keeping its active indicator.

Panels permalink

Give each tab its own panel by switching on the active value in panelBuilder.

Composable tab strip permalink

Omit panelBuilder when the window owns its active document, keep document tabs at measure-sm width, then add closing, leading icons, actions, or dragging only where needed.

API

Tabs preserves native Flutter state and callbacks while applying Tinyrack token defaults.