seong

Flutter - Tooltip 위젯 본문

Flutter/Flutter

Flutter - Tooltip 위젯

hyeonseong 2024. 4. 18. 09:39

message: 툴팁에 표시 될 문자

richMessage: 일반 richText와 동일

height : 툴팁의 높이

padding : 툴팁의 내부 패딩

margin : 툴팁의 외부 여백

preferBelow : false일 경우 아래, true일 경우 위로 배치 ( 기본값은 true이다 )

verticalOffset: 상하의 디테일한 위치 조정 값, preferBelow 만으로는 원하는 위치를 조정할 수 없기 때문에 Offset과 padding,margin 을 섞어서 사용한다.
triggerMode : 툴팁을 어떤 이벤트에 띄울지 , 기본값은 longPress이다.

- TooltipTriggerMode.manual : 툴팁에 마우스를 올렸을 경우 표시

- TooltipTriggerMode.tap : 툴팁을 클릭했을 경우 표시

waitDuration : 툴팁 표시 전 대기 시간

showDuration : 툴팁을 표시 할 시간 

onTriggered : 툴팁이 호출 되었을때 호출 되는 함수


간단한 예시

위치 조정을 preferBelow, verticalOffset, margin으로 해주었다.

Tooltip(
  preferBelow: false,
  verticalOffset: -60,
  margin: const EdgeInsets.only(left: 165),
  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
  triggerMode: TooltipTriggerMode.tap,
  decoration: BoxDecoration(
    color: IhpColors.gray90,
    borderRadius: const BorderRadius.all(Radius.circular(10)),
  ),
  message: "칼로리와 거리는\n평균적으로 계산됩니다.\n* 자정이 지나면 초기화됩니다. ",
  textStyle: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    color: IhpColors.white,
  ),
  child: Image.asset(
    IhpImages.versionInfo,
    width: 20,
    height: 20,
  ),
)

'Flutter > Flutter' 카테고리의 다른 글

Flutter - Flutter with Python (1)  (0) 2024.05.17
Flutter - flutter_foreground_task  (0) 2024.05.14
Flutter - AppIcon변경 (IOS,Android)  (0) 2024.03.14
Flutter - GO_Router  (0) 2024.03.07
Flutter - 패스트캠퍼스 2일차 노트  (0) 2024.03.05