flutter pub add highlighter_coachmark根據套件公開資料產生的選型評估，僅供參考。
Highlighter Coachmark 是一個 Flutter 套件，透過顯示提示或說明作為覆蓋層，引導使用者了解應用程式功能。它會模糊背景並強調特定的 UI 元素，非常適合用於引導或功能介紹。此套件透過吸引使用者注意關鍵元件，同時不干擾介面，進而提升使用者體驗。支援可自訂樣式與流暢動畫，呈現精緻外觀。設計簡潔且易於整合，幫助開發者以最少努力實作直覺的引導流程。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
There are different ways for user on-boarding. It can be a show of screenshots or overlay with directions to features, feature discovery as in Material design or coach mark. This coach mark makes blurred background and highlights desired element.
This coach mark makes blurred background and highlights desired element.
A picture is worth a thousand words, so take a look at gif
And a few tips from UX
Presenting hints one-by-one, at the right moment, makes it a lot easier for users to understand and learn instructions.
To have their full effect, coach marks should focus on particularly innovative or unexpected elements.
Take a look at example folder. There are also 4 coach marks there. They are all presented in gif above
CoachMark coachMark = CoachMark();
RenderBox target = targetGlobalKey.currentContext.findRenderObject();
Rect markRect = target.localToGlobal(Offset.zero) & target.size;
markRect = Rect.fromCircle(center: markRect.center, radius: markRect.longestSide * 0.6);
coachMark.show(
targetContext: targetGlobalKey.currentContext,
markRect: markRect,
children: [
Positioned(
top: markRect.top + 5.0,
right: 10.0,
child: Text("Long tap on button to see options",
style: const TextStyle(
fontSize: 24.0,
fontStyle: FontStyle.italic,
color: Colors.white,
)))
],
duration: null,
onClose: () {
appState.setCoachMarkIsShown(true);
});
暫無相關資料。