Tinyrack

テーマ

TinyrackのMaterial 3ライト・ダークテーマを適用します。

アプリケーションの境界で両方のテーマを適用します。

MaterialApp(
  theme: TinyrackTheme.light(),
  darkTheme: TinyrackTheme.dark(),
  themeMode: ThemeMode.system,
  home: const App(),
);

どちらもMaterial 3を使い、TinyrackThemeDataをThemeExtensionとして 登録します。セマンティックなsurfaceカラーをMaterialのcanvasとscaffoldの 背景に割り当てるため、ルーティングされたページもデフォルトで同じライト・ ダークのサーフェスを使います。カスタムウィジェットでTinyrackコンポーネントと 同じセマンティックカラーが必要な場合は、context.tinyrackThemeから取得します。 フォーカス、キーボード、ジェスチャー、semantics、text scalingはFlutterの 規約に従います。

IBM Plex Sans、Mono、韓国語、日本語のフォントファイル11個を同梱します。 プラットフォーム向けにパッケージ化する前の合計サイズは約16.4 MBで、 アプリケーションのFlutterアセットバンドルに含まれます。実行時に フォントをダウンロードする必要はありません。

UI密度

狭い画面やタッチ操作を優先する画面で、UI全体を読みやすく操作しやすくするには TRUiDensityScopeを使ってください。レスポンシブ条件は製品側で決めます。 スコープはstandardで既存のデフォルトを維持し、comfortableでは48pxの TRUiSize.xlコントロール、1段階大きいタイポグラフィ、広めのデフォルトの カード余白とステータス表示を使います。

LayoutBuilder(
  builder: (context, constraints) => TRUiDensityScope(
    density: constraints.maxWidth < TRBreakpoints.small
        ? TRUiDensity.comfortable
        : TRUiDensity.standard,
    child: const AppContent(),
  ),
);

サイズを固定するコンポーネントにはuiSizeまたはカード余白を直接指定して ください。明示したsm、md、lg、xlはスコープより優先されます。 システムのtext scalingは、密度で選ばれたタイポグラフィに引き続き適用されます。

Flutterが描画するポップアップ行は、アンカーコントロールとは別に密度を解決します。 standardはTRUiSize.smの行メトリクス（高さ28px、ラベル12px）、 comfortableはTRUiSize.lgの行メトリクス（高さ40px、ラベル14px）を使います。 メニュー、サブメニュー、メニューバー、Flutterコンテキストメニュー、Select、 Autocomplete、Combobox、インライン候補は、root overlayでもアンカーの密度を 維持します。メニューに明示したuiSizeは引き続きトリガーだけを変更します。 特定のポップアップを小さく保つには、アンカーを入れ子のstandardスコープで囲みます。

ページ遷移

どちらのテーマもすべてのTargetPlatformにTRPageTransitionsBuilderを 登録します。AndroidはFlutterのpredictive Back遷移を使い、iOS、macOS、 Linux、WindowsはMaterialのforward-fadeモーションを使います。プラット フォームがdisableAnimationsを報告する場合は、モーションなしでページを そのまま返します。

ルーティングされた領域に別のモーション仕様が必要な場合だけ、異なるビルダーを 登録してください。Pageのライフサイクルとidentityを維持しながら固定領域を 動かさない場合は、TRPageTransitionsBuilder.none()を使います。

ThemeData theme = TinyrackTheme.light().copyWith(
  pageTransitionsTheme: const PageTransitionsTheme(
    builders: <TargetPlatform, PageTransitionsBuilder>{
      TargetPlatform.windows: TRPageTransitionsBuilder.none(),
    },
  ),
);

クロスプラットフォームのコンポーネント仕様

ReactとFlutterの両方に同じ概念がある場合は、セマンティックトークンと コンポーネントの目的を共有します。公開API、構成、操作方法、レンダリング 結果のピクセルが同一であることは保証しません。

変更前変更後
AlertとBadgeのintentvariant: TRStatusVariant.*
表示・ローディング設定がないIconButtonappearance、loading、loadingLabel
Cardの自由形式の余白TRCardPadding、TRCardVariant、Card構成ウィジェット
親の色だけを継承するSpinnervariant: TRSpinnerVariant.*
Textのrole、TRTextStyle、任意の色TRTextVariantと型付きのcolor、align、weight、truncate

TRTextFieldのFlutter Formライフサイクル用プロパティは引き続き 利用できます。リポジトリの検査では、すべての公開コンポーネントを共通の 目的、明示的なプラットフォーム適応、プラットフォーム固有機能のいずれかに 分類します。ReactのブラウザテストとFlutterのウィジェット・goldenテストは、 それぞれのレンダリングエンジン内で動作と外観を検証します。