Flutter図鑑

Tooltip

Tooltip Widgetは特定のユニットに対してユーザーに情報を提供するために使用されます。
補足情報がある時などユーザーに伝えたい情報が場合に有効です。

基本的な使用方法

  • Tooltip

FlutterではTooltipを使用して、ツールチップを表示することができます。
messageに任意のテキストを指定し、childに対象にしたいwidgetを指定します。

Tooltip(
  message: "I'm tooltip!",
  child: TextButton(
    onPressed: () {}, child: const Text("Mouse over this text")
  ),
)

表示位置の変更

  • verticalOffset

verticalOffsetの値を調整することで、縦方向にツールチップを表示する位置を調整できます。
また、marginの値を調整し、左右方向にも調整することが可能です。

Tooltip(
  verticalOffset: -48,
  message: "I'm tooltip!",
  child: TextButton(onPressed: () {}, child: const Text("Top")),
),

見た目の調整

  • BoxDecoration

decorationプロパティを使用して、背景色や枠線などのスタイルを変更することができます。
そのほかにも様々なプロパティが用意されており、柔軟に見た目を変更することが可能です。

Tooltip(
  message: "I'm tooltip!",
  padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
  decoration: BoxDecoration(
    color: Colors.purple[300],  // background color
    borderRadius: BorderRadius.circular(10) // border radius
  ),
  textStyle: const TextStyle(fontSize: 14, color: Colors.white),
  child: TextButton(
      onPressed: () {}, child: const Text("Mouse over this text")
  ),
)

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous