Flutter로 가이드 만들기

지도

언뜻 보는 이용자들이 앱에 대한 이해도가 없기 때문에 멘토링(튜토리얼)이 있으면 친절하다.
그래서 이번에는 Flutter에서 쉽게 지도할 수 있는 프로그램 라이브러리를 찾았습니다. 소개해 드리겠습니다.

flutter_intro

flutter_intro는 Fluter에서 가이드를 만드는 데 편리한 프로그램 라이브러리입니다.애니메이션을 설치할 수 있기 때문에 추천합니다.
https://pub.dev/packages/flutter_intro
위 링크에서 설치 방법 등을 확인하십시오.

샘플 코드

이번에는 flutter_intro의 Example의 코드부터 해설을 시작하겠습니다.
묵인
고급
사용자 정의

Intro

가이드를 재생할 대상입니다.안내 단계 및 안내를 위한 Builder를 구성합니다.

Default Theme

기본적으로 다음과 같습니다.
각 단계의 텍스트를 texts에 설정합니다.

intro = Intro(
  stepCount: 4,
  maskClosable: true,
  onHighlightWidgetTap: (introStatus) {
    print(introStatus);
  },

  /// use defaultTheme
  widgetBuilder: StepWidgetBuilder.useDefaultTheme(
    texts: [
      'Hello, I\'m Flutter Intro.',
      'I can help you quickly implement the Step By Step guide in the Flutter project.',
      'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
      'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
    ],
    buttonTextBuilder: (currPage, totalPage) {
      return currPage < totalPage - 1 ? 'Next' : 'Finish';
    },
  ),
);
intro.setStepConfig(
  0,
  borderRadius: BorderRadius.circular(64),
);

Advanced Theme

고급이면 아래와 같다.
각 단계별 Widget을 사용자 정의할 수 있습니다.

intro = Intro(
  stepCount: 4,
  maskClosable: false,
  onHighlightWidgetTap: (introStatus) {
    print(introStatus);
  },

  /// useAdvancedTheme
  widgetBuilder: StepWidgetBuilder.useAdvancedTheme(
    widgetBuilder: (params) {
      return Container(
        decoration: BoxDecoration(
          color: Colors.red.withOpacity(.6),
        ),
        child: Column(
          children: [
            Text(
              '${params.currentStepIndex + 1}/${params.stepCount}',
              style: TextStyle(
                color: Colors.green,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            Row(
              children: [
                ElevatedButton(
                  onPressed: params.onPrev,
                  child: Text('Prev'),
                ),
                ElevatedButton(
                  onPressed: params.onNext,
                  child: Text('Next'),
                ),
                ElevatedButton(
                  onPressed: params.onFinish,
                  child: Text('Finish'),
                ),
              ],
            ),
          ],
        ),
      );
    },
  ),
);
intro.setStepConfig(
  0,
  borderRadius: BorderRadius.circular(64),
);

Custom Theme

아마도 맞춤형 제작이 가장 자주 사용하는 것 같다.
자체 Builder 함수를 사용하여 수행합니다.
사용자 정의의 장점은 고급에 비해 Widget 위치를 자유롭게 설정할 수 있다는 점입니다.

intro = Intro(
  stepCount: 4,

  maskClosable: true,

  /// implement widgetBuilder function
  widgetBuilder: customThemeWidgetBuilder,
);

Widget customThemeWidgetBuilder(StepWidgetParams stepWidgetParams) {
  List<String> texts = [
    'Hello, I\'m Flutter Intro.',
    'I can help you quickly implement the Step By Step guide in the Flutter project.',
    'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
    'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
  ];
  return Padding(
    padding: EdgeInsets.all(
      32,
    ),
    child: Column(
      children: [
        SizedBox(
          height: 40,
        ),
        Text(
          '${texts[stepWidgetParams.currentStepIndex]}【${stepWidgetParams.currentStepIndex + 1} / ${stepWidgetParams.stepCount}】',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
          ),
        ),
        Row(
          children: [
            ElevatedButton(
              onPressed: stepWidgetParams.onPrev,
              child: Text(
                'Prev',
              ),
            ),
            SizedBox(
              width: 16,
            ),
            ElevatedButton(
              onPressed: stepWidgetParams.onNext,
              child: Text(
                'Next',
              ),
            ),
            SizedBox(
              width: 16,
            ),
            ElevatedButton(
              onPressed: stepWidgetParams.onFinish,
              child: Text(
                'Finish',
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

Step WidgetParams 정보

StepWidgetParams는 진행 상황을 지도하는 매개 변수다.
다음과 같은 내용이 있다.

currentStepIndex는 현재 스텝 수(인덱스)

입니다.

stepCount는 전체적인 보진수

onPrev/onNext/onFinish/前のステップ/次のステップ/終了

까지 각각 전진

가이드 객체 Widget 설정

intro를 생성한 후 가이드 대상 Widget을 설정합니다.
build 시점에서 가이드 대상widget에 introkey를 설정합니다.

FloatingActionButton(
  /// 1st guide
  key: intro.keys[0],
  child: Icon(
    Icons.play_arrow,
  ),
  ...

이런 느낌으로 설정intro.keys.intro.keys에 지정된 색인은 부트 순서입니다.

Widget build(BuildContext context) {
  return WillPopScope(
    child: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                width: 100,
                child: Placeholder(
                  /// 2nd guide
                  key: intro.keys[1],
                  fallbackHeight: 100,
                ),
              ),
              SizedBox(
                height: 16,
              ),
              Placeholder(
                /// 3rd guide
                key: intro.keys[2],
                fallbackHeight: 100,
              ),
              SizedBox(
                height: 16,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  SizedBox(
                    width: 100,
                    child: Placeholder(
                      /// 4th guide
                      key: intro.keys[3],
                      fallbackHeight: 100,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        /// 1st guide
        key: intro.keys[0],
        child: Icon(
          Icons.play_arrow,
        ),
        onPressed: () {
          intro.start(context);
        },
      ),
    ),
    ...
  );
}

지도를 시작하다

여기서 미리 준비 끝났어.
이후intro.start(context)부터 지도를 시작한다.

@override
void initState() {
  super.initState();
  Timer(
    Duration(
      milliseconds: 500,
    ),
        () {
      /// start the intro
      intro.start(context);
    },
  );
}

개방 처리

앞으로 해방 처리를 잊지 마라.

IntroStatus introStatus = intro.getStatus();
if (introStatus.isOpen) {
  // destroy guide page when tap back key
  intro.dispose();
}

끝맺다

실시지도(강좌)는 상당히 번거롭지만, 사용flutter_intro은 비교적 실현하기 쉽다.

가능하면 이쪽도 오세요.

Decolator 모드로 Widget 구축

Flutter로 게임 파트 1을 만들어 봤습니다.

[Flutter] Audio Cache에서 BGM을 틀 때 아이폰이면 매너 모드를 관통할 수 있어요.