(코딩쉐프) 순한 맛 시즌 2 - 온보딩 스크린

 

온보딩 스크린은 앱을 처음 설치했을 때 간단한 안내사항 및 튜토리얼 같은 것을 안내하는 페이지

 

1. 구현을 위해 다음 패키지를 설치해야한다

introduction_screen: ^3.1.2

https://pub.dev/packages/introduction_screen

introduction_screen | Flutter Package

 

2. 파일은

main.dart (기본 화면) - 앱의 메인화면이 시작 될 것

onboarding.dart (온보딩 스크린 꾸미기)

 

3. main.dart

Elevated버튼 부분에서 push 대신 pushReplacement를 사용했는데 뒤로가기 버튼을 없앨 수 있다.

MaterialApp의 홈부분에서 MyPage로 가는게 아니라 OnBoardingPage로 연결되는 것이 포인트

(사실 온보딩페이지는 1번만 보여주고 그 다음부터는 보여주면 안되는 것이지만 우리는 연습을 위해서 이렇게 함)

import 'package:flutter/material.dart';
import 'onboarding.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: OnBoardingPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Main Screen',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => const OnBoardingPage()));
                },
                child: const Text('Go to onboarding Screen'))
          ],
        ),
      ),
    );
  }
}

 

4. onboarding.dart

우선 IntroductionScreen에 보면 아주 다양한 속성들을 가지고 있는데 여기서 우리는 아래 속성들을 편집할 예정

page: 배치할 페이지 꾸미는 부분

done: 마지막 화면에 띄워줄 글씨

onDone: 마지막 화면에서 메인 페이지로 연결

next: 다음 화면 표시할 것 (우리는 forward 아이콘 사용)

showSkipButton (skip버튼 사용 여부)

skip: 화면에 표시할 것

dotsDecoration: 화면 진행상황 표시 점을 꾸미기

curve: 에니메이션 효과 넣기

 

import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';

import 'main.dart';

class OnBoardingPage extends StatelessWidget {
  const OnBoardingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: [
        PageViewModel(
            title: 'Welcome to my app',
            body: 'This is the first Page',
            image: Image.asset('image/page1.png'),
            decoration: getPageDecoration()),
        PageViewModel(
            title: 'Welcome to my app',
            body: 'This is the second Page',
            image: Image.asset('image/page2.png'),
            decoration: getPageDecoration()),
        PageViewModel(
            title: 'Welcome to my app',
            body: 'This is the third Page',
            image: Image.asset('image/page3.png'),
            decoration: getPageDecoration()),
      ],
      done: const Text('Done!'),
      onDone: () {
        Navigator.of(context)
            .pushReplacement(MaterialPageRoute(builder: (context) => const MyPage()));
      },
      next: const Icon(Icons.arrow_forward),
      showSkipButton: true,
      skip: const Text("Skip"),
      dotsDecorator: DotsDecorator(
          color: Colors.cyan,
          size: const Size(10, 10),
          activeSize: const Size(22, 10),
          activeShape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(24))),
      curve: Curves.bounceOut,
    );
  }
}

PageDecoration getPageDecoration() {
  return const PageDecoration(
    titleTextStyle: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
    bodyTextStyle: TextStyle(
      fontSize: 18,
      color: Colors.blue,
    ),
    imagePadding: EdgeInsets.only(top: 40),
    pageColor: Colors.orange,
  );
}

 

페이지별로 동일한 데코레이션을 모든 페이지마다 따로 코드를 작성한다면 너무 비효율적임

그래서 우리는 pageDecoration메서드를 만들어서 decoration을 함수 호출방식으로 사용

반복작업을 효과적으로 바꿈