Drawer · Tinyrack Design System

Present a content-sized modal sheet or a viewport-relative, swipeable drawer from any logical edge.

Contract

Axis	Contract
Drag handle	Shown by default for top and bottom sheets; `showDragHandle: false` hides it and disables sheet dragging while content remains scrollable
Sizing	Content-sized up to `maxExtent` by default for top and bottom; fixed or draggable viewport-relative sizing through `snapPoints`
Drag ownership	`surface` coordinates expansion, scrolling, and collapse across the whole sheet; `handleOnly` reserves drawer motion for the visible handle and leaves content gestures untouched
Snap motion	Uses Tinyrack motion after a drag and settles immediately when reduced motion is enabled

Top and bottom drawers fit their content by default, up to the full viewport. Supply one snapPoints value for a fixed viewport-relative size or several for drag-to-snap behavior. The default TRDrawerDragBehavior.surface coordinates sheet motion with the registered content scroll region across the complete header and content surface. Choose handleOnly when the content owns a dedicated viewport: only the visible handle then moves the drawer, and content gestures remain with that viewport. Set showDragHandle to false to hide the handle and disable sheet dragging while preserving content scrolling. Start and end drawers have no handle, so they keep complete-surface horizontal dragging. Drawer surfaces extend to the viewport edge and preserve the system safe areas they can meet.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

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

showTRDrawer<void>(
  context: context,
  builder: (_) => const TRDrawer(
    maxExtent: 0.7,
    content: Text('Settings'),
  ),
)

API

Gesture properties

Prop	Type / default	Purpose
`dragBehavior`	`TRDrawerDragBehavior · surface`	Chooses whether the complete sheet or only its visible handle owns drag-to-snap and drag-to-dismiss.
`showDragHandle`	`bool · true`	Shows the top or bottom sheet handle. Turning it off also disables vertical drawer dragging.
`scrollContent`	`bool · true`	Lets the drawer provide the content scroll region. Set it to false when a fixed header and dedicated viewport are supplied as content.