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 colorborderRadius: BorderRadius.circular(10) // border radius),textStyle: const TextStyle(fontSize: 14, color: Colors.white),child: TextButton(onPressed: () {}, child: const Text("Mouse over this text")),)
さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。