Tinyrack

Window Frame

Flutter の内容を macOS またはブラウザ風の装飾フレームで囲みます。

アプリの内容を macOS またはブラウザ風の装飾フレームで囲みます。

主なプロパティ

プロパティ説明
バリアントmacos, browser
本文余白none, md, lg

インストール

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

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

TRWindowFrame(
  variant: TRWindowFrameVariant.macos,
  title: const Text('Tinyrack'),
  body: const Text('Rack overview'),
)

例

アプリケーションウィンドウクローム パーマリンク

ドラッグ可能な中央領域の両側にアプリメニューとウィンドウ操作を配置します。スロットは任意のウィジェットを受け取るので、操作は TRIconButton で組み立て、グリフと intent はクロムに合わせて選んでください。

ブラウザクローム パーマリンク

Web コンテンツのプレビューには browser バリアントとアドレスバーを使います。

API

TRWindowFrame のプロパティ

Prop型 / デフォルト用途
bodyWidget · requiredフレーム内の内容を指定します。
variantTRWindowFrameVariant · macosアプリまたはブラウザのフレームを選択します。
TRWindowFrameTitleBar.leading / actionsWidget?ドラッグ領域の両端に任意のウィジェットを配置します。ウィンドウ操作は TRIconButton で組み立て、グリフと intent はクロムに合わせて選んでください。
paddingTRWindowFramePadding · md本文の内側余白を設定します。
title / addressWidget?選択したタイトルバーにラベルを表示します。