플러터(flutter) - 온보딩 화면 만들기

온보딩 화면이란 앱을 처음 실행했을 때 부여주는 앱의 사용 방법이나 소개 페이지를 의미한다.

 

안드로이드에서는 주로 viewPager나 Fragment를 사용해서 구현했는데

 

플러터에서는 패키지를 사용해서 구현해 본다.

---

패키지 설치하기

 

아래의 링크에서 패키지를 설치할 수 있다.

 

https://pub.dev/packages/introduction_screen

introduction_screen | Flutter Package

 

다음과 같이 넣으면 되는데

 

dependencies:
  flutter:
    sdk: flutter
  
  # introduction_screen - https://pub.dev/packages/introduction_screen
  introduction_screen: ^3.0.1

 

문제는 현재 사용 중인 flutter 버전에 맞게 패키지의 버전을 설정해줘야 한다는 것이다.

 

(즉, 무조건 최신 버전의 패키지를 사용하는 것이 정답은 아니다)

 

패키지를 업데이트했는데 에러가 발생한다면 버전을 바꿔가면서 현재 flutter 버전에 맞는

 

패키지 버전을 찾을 필요가 있다.

---

introduction_screen 패키지 사용하기

기본적으로 다음과 같은 위젯을 통해 사용할 수 있다.

 

IntroductionScreen

해당 위젯은 onboarding 화면을 표시할 최상위 루트의 위젯을 의미한다.

 

해당 위젯 안에 온보딩 화면에서 사용될 위젯을 정의한다.

 

PageViewModel

온보딩 화면에서 각각의 화면을 의미한다.

 

이미지나 텍스트 등을 넣을 수 있다.

 

다음과 같은 방법으로 사용할 수 있다.

 

class OnboardingScreen extends StatelessWidget {
  const OnboardingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntroductionScreen(
        pages: [
          // 첫 번째 페이지
          PageViewModel(
            title: "빠른 개발",
            body: "Flutter의 hot reload는 쉽고 UI 빌드를 도와줍니다.",
            image: Padding(
              padding: const EdgeInsets.all(32),
              child: Image.network(
                  'https://user-images.githubusercontent.com/26322627/143761841-ba5c8fa6-af01-4740-81b8-b8ff23d40253.png'),
            ),
            decoration: const PageDecoration(
              titleTextStyle: TextStyle(
                color: Colors.blueAccent,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              bodyTextStyle: TextStyle(
                color: Colors.black,
                fontSize: 18,
              ),
            ),
          ),
          // 두 번째 페이지
          PageViewModel(
            title: "표현력 있고 유연한 UI",
            body: "Flutter에 내장된 아름다운 위젯들로 사용자를 기쁘게 하세요.",
            image: Image.network(
                'https://user-images.githubusercontent.com/26322627/143762620-8cc627ce-62b5-426b-bc81-a8f578e8549c.png'),
            decoration: const PageDecoration(
              titleTextStyle: TextStyle(
                color: Colors.blueAccent,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              bodyTextStyle: TextStyle(
                color: Colors.black,
                fontSize: 18,
              ),
            ),
          ),
        ],
        next: const Text("Next"),
        done: const Text("Done"),
        showBackButton: true,
        back: const Text("Back"),
        onDone: () {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(
              builder: (context) => const HomePage(),
            ),
          );
        },
      ),
    );
  }
}

 

주의할 점은 다음과 같다.

1. done을 정의했을 경우 onDone 함수도 반드시 정의해야 한다.
2. back을 정의했을 경우 showBackButton도 정의해야 보이게 된다.
3. skip을 정의했을 경우 showSkipButton도 정의해야 보여지게 된다.

실행 결과는 다음과 같다.

 

---

 

플러터에서 androidManifest에 localProperties 값 대입하기