Tinyrack

Dialog

Present modal Flutter content with typed results, focus containment, and logical placement.

Present modal content on a Navigator route with typed results, focus containment, and five logical placements.

Contract

AxisContract
OverflowThe body owns vertical scrolling. Its content remains inset while the scrollbar reaches the logical trailing edge; title, description, and actions stay fixed.

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';

final result = await showTRDialog<bool>(
  context: context,
  builder: (context) => TRDialog(
    title: const Text('Deploy rack?'),
    content: const Text('The stable channel will be updated.'),
    actions: TRButton(
      onPressed: () => Navigator.pop(context, true),
      child: const Text('Deploy'),
    ),
  ),
);

Examples

Typed result permalink

showTRDialog returns the value passed to Navigator.pop and preserves barrier semantics, system back, focus containment, and trigger focus restoration.

Nested layers permalink

Select and Menu can open inside a dialog. Start and end placements resolve through the current text direction.

Long body content permalink

Long content scrolls inside the body while the title and actions stay fixed. The route also keeps the surface above the software keyboard. Content keeps its inset while the scrollbar sits against the surface edge.

API

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