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