Tinyrack

CopyButton

値をクリップボードにコピーし、完了状態を一時的に表示します。

値をクリップボードにコピーし、完了状態を一時的に表示します。

主なプロパティ

プロパティ説明
状態TRCopyButtonStatus.idle から始まり、クリップボードへの書き込みが成功すると copied に変わり、resetDelay の経過後に idle へ戻ります。
連続した押下押すたびにリセットタイマーが再スタートするため、最後に押した時点が idleLabel へ戻る時刻を決めます。
ラベル幅両方のラベルが配置されたままになるため、コピー時に幅が変わらず、広い方のラベルの幅を保ちます。
クリップボードの失敗プラットフォームがクリップボードへの書き込みを拒否した場合、ボタンは idleLabel のままで onStatusChange も呼ばれません。
外観appearance、intent、uiSize は内部の TRButton にそのまま渡されます。

value には、コマンドや識別子など読み手がクリップボードに期待する値を渡してください。周囲の画面がコピーに反応する必要がある場合は onStatusChange を監視します。

インストール

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

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

class InstallCommand extends StatefulWidget {
  const InstallCommand({super.key});

  @override
  State<InstallCommand> createState() => _InstallCommandState();
}

class _InstallCommandState extends State<InstallCommand> {
  TRCopyButtonStatus status = TRCopyButtonStatus.idle;

  @override
  Widget build(BuildContext context) => Row(
    mainAxisSize: MainAxisSize.min,
    spacing: TRSpacing.small,
    children: [
      const TRCode('flutter pub add tinyrack_ui'),
      TRCopyButton(
        value: 'flutter pub add tinyrack_ui',
        idleLabel: 'コピー',
        copiedLabel: 'コピー済み',
        onStatusChange: (next) => setState(() => status = next),
      ),
    ],
  );
}

例

文脈に合わせたラベル パーマリンク

何をコピーするかをラベルに含めると、1 つの画面に複数のコピーボタンがあっても確認表示が明確になります。

Button から継承した組み合わせ パーマリンク

`appearance`、`intent`、`uiSize` は内部の `TRButton` に届き、`resetDelay` は確認表示の長さを調整します。

API

コピー動作

Prop型 / デフォルト用途
valueString (required)クリップボードに書き込むテキストです。
idleLabelString = 'Copy'コピー前と復帰待ち時間の経過後に表示するラベルです。
copiedLabelString = 'Copied'状態が copied の間に表示する確認ラベルです。
resetDelayDuration = Duration(seconds: 2)ラベルが idleLabel に戻るまで確認状態を保つ時間です。
onStatusChangeValueChanged<TRCopyButtonStatus>?コピーに成功すると copied、待ち時間が終わると idle で呼ばれます。

外観

Prop型 / デフォルト用途
appearanceTRAppearance = TRAppearance.solidsolid、outline、ghost からボタン表面を選びます。
intentTRIntent = TRIntent.neutralTRButton と共有するセマンティックな色のインテントを適用します。
uiSizeTRUiSize = TRUiSize.mdコントロールの高さとタイポグラフィを md、lg に設定します。