Flutter web Tutorial 디자인 - turorial_coach_mark 플러그인

플러터로 웹 개발을 하면서 특정기능의 튜토리얼을 사용자에게 전달할 상황이 생겼다.
게임컨셉의 웹이기 때문에 일반적으로 핸드폰 게임에서 사용되는 튜토리얼 방법을 래퍼런스로 삼았다.
특정부분만 하이라이트되고 배경은 딤처리가 되는 방식인데, 해당 기능이 플러그인으로 제작되어 있어 감사하게 사용했고
사용한 방법을 기록하고자 한다.

결과물

https://github.com/KoreanTuna/FlutterTutorialPlugin

GitHub - KoreanTuna/FlutterTutorialPlugin

유튜브 영상 https://www.youtube.com/watch?v=nBdPl6jjsoU&t=141s 을 참고했습니다.
tutorial_coach_mark 1.11버젼 사용 / null-safety적용
패키지 주소 https://pub.dev/packages/tutorial_coach_mark

tutorial_coach_mark | Flutter Package

---

기본작업
패키지를 yaml파일에 추가해주고 dart파일에도 패키지를 import해준 뒤
기능구현에 앞서 플러그인에서 제공하는 오브젝트를 생성한다.
tutorial_coach_mark 플러그인은 리스트안에 하이라이트될 위젯인 TargetFocus를 넣고 그 순서대로 스크린에 표시한다.
때문에 하이라이트될 위젯들이 들어간 빈 리스트를 생성한다. null-safety가 적용되고 나서부터는 리스트를 생성할때
List<TargetFocus> targets = List(); 의 방식을 막고 있다.
마지막 기본작업으로 타겟이 될 위젯들을 지명하기 위한 Globalkey 변수들을 생성한다.

 //기본 작업 //튜토리얼 오브젝트 생성 TutorialCoachMark tutorialCoachMark; //튜토리얼 진행 단계를 저장할 리스트 List<TargetFocus> targetsList = []; //튜토리얼 단계별 위젯들을 지정할 키 생성 GlobalKey key1 = GlobalKey(); GlobalKey key2 = GlobalKey(); GlobalKey key3 = GlobalKey(); GlobalKey key4 = GlobalKey();

---

다음으로 showTutorial()이라는 함수를 작성한다. 이 함수는 오브젝트를 생성함과 동시에 화면에 튜토리얼 UI를 디스플레이하는 방아쇠 역할의 함수로 사용된다.
오브젝트를 생성하며 스크린에 보여질 하이트라이트 속성 값들을 지정해주는 작업을 한다.
매개변수는 context와 targets를 우선하고 그 뒤는 순서가 상관이없다. context는 현재 위젯의 context를 보내고, targets는 하이라이트될 위젯들을 담던 리스트 변수를 보낸다. colorShadow와 opacityShadow는 하이라이트된 위젯 외 배경의 색을 조정한다.

void showTutorial() { tutorialCoachMark = TutorialCoachMark(context, targets: targetsList, colorShadow: Colors.black, opacityShadow: 0.85) ..show(); }

---

다음으로 실제 하이라이트 타겟이 될 위젯과 하이라이트 될 때의 환경들을 만들어 리스트변수에 추가하는 함수를 만든다.
아래 함수의 파라미터에는 하이라이트됐을때 보여질 가이드 텍스트와 선택될 위젯에 들어갈 key값이 들어가게 된다.
initTarget은 바로 targetList.add를 불러 리스트에 들어갈 위젯을 찾도록 한다.
리스트에 들어가는 타입은 TargetFocus란 이름에 패키지에 속해진 위젯이다.
focusAnimationDuration은 하이라이트될 때의 애니메이션 속도를 조정한다.
radius와 shape은 하이라이트의 모양과 테두리 r값을 설정한다. 모양은 circle과 rect 두가지가 있다.
keyTarget에는 파라미터에서 받은 GlobalKey값이 담긴 tutorialkey를 전달한다.
contents는 TargetContent 위젯 안에 하이라이트될때 함께 보여질 컨텐츠 위젯을 넣을 수 있다.

void initTarget(String script, GlobalKey tutorialkey) { targetsList.add( TargetFocus( focusAnimationDuration: Duration(milliseconds: 500), radius: 12, identify: "Target 0", keyTarget: tutorialkey, shape: ShapeLightFocus.RRect, contents: [ TargetContent( align: ContentAlign.right, child: Container( child: Column( children: [ Text( script, style: TextStyle( fontSize: 13, color: Colors.white, ), textAlign: TextAlign.center, ), SizedBox(height: 6), Text( "(밝은 부분을 클릭해 다음으로 넘어가세요)", style: TextStyle( fontSize: 11, color: Colors.white.withOpacity(0.7), ), ), ], ), ), ) ], ), ); }

---

InitState함수를 생성하여 4개의 InitTarget함수를 호출하고 각각의 설명 텍스트와 key값을 전달한다.
레이아웃 위젯 생성이 완료된 이후 튜토리얼을 표시하기 위해 WidgetBinding.instance!.addPostFrameCallback 함수를 사용했다.
레이아웃이 생성되기 전에 튜토리얼이 진행되면 빨간화면과 함께 버그가 표시된다.
레이아웃 생성이 완료되면 afterLayout이라는 함수를 불러 아까 생성했던 showTutorial함수를 불러 튜토리얼 UI가 스크린에 표시되는걸 시작하도록 코딩했다.

 void _afterLayout(_) { Future.delayed(Duration(microseconds: 100)); showTutorial(); } @override void initState() { initTarget("1번 키의 설명을 위한 텍스트입니다.", key1); initTarget("2번 키의 설명을 위한 텍스트입니다.", key2); initTarget("3번 키의 설명을 위한 텍스트입니다.", key3); initTarget("4번 키의 설명을 위한 텍스트입니다.", key4); super.initState(); WidgetsBinding.instance!.addPostFrameCallback(_afterLayout); }

---

마지막으로 스크린에 보여질 위젯들을 Scaffold 안에 작성하고 각 위젯들에 튜토리얼이 표시될 순서대로 key값들을 지정해준다.
하이라이트된 부분을 클릭하면 다음 순서로 넘어갈 수 있다.

Text( "1번 키 위젯", style: TextStyle(fontSize: 24, color: Colors.blue), key: key1, ), SizedBox(height: 36), Text( "2번 키 위젯", style: TextStyle(fontSize: 24, color: Colors.blue), key: key2, ), SizedBox(height: 36), Text( "3번 키 위젯", style: TextStyle(fontSize: 24, color: Colors.blue), key: key3, ), SizedBox(height: 36), Text( "4번 키 위젯", style: TextStyle(fontSize: 24, color: Colors.blue), key: key4, ),

---

결과물

웹과 안드로이드 애뮬에서는 이상없이 잘 돌아갔지만 IOS 애뮬에서는 엄청나게 버벅이고 램을 엄청 잡아먹는 버그가 있었다. 무슨 이유에서인지는 아직 확인하지 못한 상태. 확인하면 바로 업데이트를 할 예정.
모바일을 기본 타겟으로 생성된 플러그인이라서 그런지 웹에서는 하이라이트됐을때 나오는 텍스트의 위치가 모바일과 다르게 굉장히 어중간한 위치에 생성된다. 때문에 customposition을 사용하여 직접 화면안에서 Positioned위젯의 위치를 지정하는 것처럼 조정을 해줘야 했다. 그 외에는 큰 문제없이 잘 사용되고 있다.