AppShell

型付きの header、sidebar、main、outline パーツを、レスポンシブな rail または modal drawer ナビゲーション、ルート進行状況、スクロール復元と組み合わせます。

主なプロパティ

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

使用方法

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

TRAppShell(
  breakpoint: TRAppShellBreakpoint.sm,
  layout: TRAppShellLayout.sidebarFirst,
  controller: controller,
  header: TRAppShellHeader(children: [brand, actions]),
  sidebar: TRAppShellSidebar(child: navigation),
  main: const TRAppShellMain(child: Workspace()),
)

パーツと状態

TRAppShell は TRAppShellHeader、TRAppShellSidebar、TRAppShellMain と任意の TRAppShellOutline を受け取ります。Brand と Actions は header を整列し、SidebarLabel は rail で視覚的に隠れてもアクセシブルな名前を保ちます。外部状態が必要な場合は、1 つの TRAppShellController で mobileOpen と sidebarMode を制御します。

final controller = TRAppShellController(
  mobileOpen: false,
  sidebarMode: TRAppShellSidebarMode.expanded,
);

TRAppShell(
  controller: controller,
  onMobileOpenChanged: handleOpen,
  onSidebarModeChanged: handleSidebarMode,
  header: TRAppShellHeader(children: [
    TRAppShellTrigger(
      icon: const Icon(Icons.menu),
      label: 'Open navigation',
    ),
    TRAppShellBrand(child: const Text('Orbit Ops')),
  ]),
  sidebar: TRAppShellSidebar(child: navigation),
  main: const TRAppShellMain(child: Workspace()),
)

レスポンシブレイアウトとフォーカス

sm は 768px、lg は 1024px の viewport 境界です。headerFirst は header を全幅に、sidebarFirst は sidebar を全高に配置します。モバイル drawer は論理的な start または end から開く Navigator route で、背景クリック、Escape、システムの戻る操作で閉じ、フォーカスを内部に閉じ込めて trigger に戻します。mobileSidebar を rail にすると 64px のナビゲーションを表示し続けます。

アダプティブペインレイアウト

TRAdaptiveNavigationLayout と TRAdaptiveListDetailLayout を組み合わせると、600px 未満では content のみ、600–1199px では navigation と content、1200px 以上では navigation、collection、detail を配置できます。どちらのレイアウトもナビゲーション状態を所有しません。履歴、システムの戻る操作、Android の predictive Back、中断された遷移は Navigator と Page に任せてください。同じ key を持つ content Navigator を singlePane と detailPane に渡すと、ブレークポイントが変わっても状態を維持できます。子 pane は TRAdaptiveLayoutScope から viewport 全体の width class を読み取ります。

final contentNavigator = Navigator(
  key: contentNavigatorKey,
  pages: contentPages,
  onDidRemovePage: handleRemovedPage,
);

TRAdaptiveNavigationLayout(
  navigationPane: TRNavigationPane(children: navigationSections),
  contentPane: TRAdaptiveListDetailLayout(
    singlePane: contentNavigator,
    collectionPane: const ProjectList(),
    detailPane: contentNavigator,
  ),
)

ソフトウェアキーボード

TRAppShell は既定で header、sidebar、main をソフトウェアキーボードの上に保ち、背景は viewport の端まで描画します。インタラクティブなコンテンツを意図的にキーボードの背後へ描画する場合に限り、resizeToAvoidBottomInset を false に設定してください。

TRAppShell(
  resizeToAvoidBottomInset: false,
  main: const TRAppShellMain(child: ImmersiveCanvas()),
)

sidebar の幅と折りたたみ

TRAppShellSidebar は自身の幅を持ちます。既定値は現在のモードの shell 幅で、width で上書きできます。展開・折りたたみ・rail への切り替えなど、幅の変化はすべて TRMotion.normal でアニメーションし、その間コンテンツは目標幅で配置されたままクリップされます。collapsed を渡すと、折りたたみ開始と同時にフォーカス・ポインター・セマンティクスから外れ、アニメーション終了後にツリーからも取り除かれます。固定幅の SizedBox で包まないでください。アニメーションを無効にする設定では即座に切り替わります。

TRAppShell(
  sidebar: TRAppShellSidebar(
    collapsed: navigationCollapsed,
    child: navigation,
  ),
  main: const TRAppShellMain(child: Workspace()),
)

ドキュメントクロームとスクロール

docs は 48px の header、任意の outline、ルート進行状況を提供します。pendingPath が currentPath と異なると Main は busy 状態になります。container は Main 内の scroll area を使い、primary は現在の Flutter route の primary scroller を使います。PUSH と REPLACE は先頭へ移動し、POP は locationKey の位置を復元し、hash は anchorTargets の GlobalKey へ移動します。

TRAppShell(
  chrome: TRAppShellChrome.docs,
  currentPath: route.path,
  pendingPath: navigation.pendingPath,
  locationKey: route.key,
  navigationKind: TRAppShellNavigationKind.pop,
  hash: route.hash,
  anchorTargets: {'install': installHeadingKey},
  pageScroll: TRAppShellPageScroll.container,
  header: TRAppShellHeader(children: [brand, actions]),
  sidebar: TRAppShellSidebar(child: docsNavigation),
  outline: TRAppShellOutline(child: tableOfContents),
  main: TRAppShellMain(scroll: true, child: article),
)

例

API

AppShell は Flutter のネイティブ状態とコールバックを保ち、Tinyrack トークンを既定値として使用します。