Tooltip class

画面に情報を置きすぎると、かえって可読性が低下し、重要な内容がうまく伝わらない可能性があります.
この場合、Tooltipを使用すると、画面上の情報を最小限に抑え、必要な情報だけを取得できます.

これにより、アイコンに触れたりクリックしたりすると、対応する情報が表示され、再び消えてしまいます.
example

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Tooltip(
      message: 'I am a Tooltip',
      child: Text('커서를 가까이 가져오면 내가 누군지 알려주지'),
    );
  }
}

Out Put

(vscodeからカーソルを取ってしまったが、できない場合はダブルクリックしてください.そうすれば、現れる原因をさらに理解して追加するブーブー)
これによりカーソルを移動すると必要な情報が表示され、カーソルを再度移動することで情報が消失することを確保できます.
これはTooltipを使用する別の例です.
example

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: '짜잔 근데 곧 사라진다',
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        gradient: const LinearGradient(colors: <Color>[Colors.white, Colors.white]),
      ),
      height: 50,
      padding: const EdgeInsets.all(8.0),
      preferBelow: false,
      textStyle: const TextStyle(
        fontSize: 24,
      ),
      showDuration: const Duration(seconds: 2),
      waitDuration: const Duration(seconds: 1),
      child: const Text('클릭 해보삼'),
    );
  }
}

Out Put

これらのすべての情報を1つの画面に配置すると可読性が低下する可能性があるため、Tooltipを使用して有効なヒントを得ることができます.