Flutter 스터디 12 플러터 Onboarding screen

순한맛 시즌2-1 플러터 온보딩 스크린(Flutter Onboarding screen) 만들기

 

- Onboarding screen 온보딩 스크린

: 앱 시작 시, 제일 처음 사용법을 담은 introduction 페이지들과 같은걸 on-boarding screen

 

무료 이미지 제공 사이트

Free Vectors, Stock Photos & PSD Downloads | Freepik

 

const : 한번 정해지면 바뀌지 않는 데이터를 사용하는 위젯 앞에 const 위젯을 넣도록 함.

static 위젯들은 rebuild 하지 않음으로 성능이나 효율성, 안정성에 큰 도움이 됨

 

//main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return 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(
          children: [
            const Text('Main Screen',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
            ),
            ElevatedButton(onPressed: () {},
                child: const Text('Go to onboarding screen'),
            ),
          ],
        ),
      ),
    );
  }
}

 

새로운 Dart 파일 생성

// onboarding.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

 

아래 페이지로 가서 

 

 

Dart packages

1. introduction_screen 검색 후 pubspec.yaml에 해당 코드 붙여넣기

 

2. onboardign.dart 제일 상단에 해당 코드 붙여넣기

 

3. main.dart에 onboading.dart를 import 시키기

 

 

전체 코드

▲결과물 및 코드▼

 

// main.dart

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'),
            ),
          ],
        ),
      ),
    );
  }
}

//onboarding.dart

import 'dart:math';

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

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

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: [ // 대부분의 온보딩 스크린은 여러 페이지로 구성되어 있어서 컬럼위젯처럼 pages argument는 리스트를 불러와서 사용
        PageViewModel(
          title: 'Welcome to my app',
          body: 'This is the first page'
            'We ar making on-boarding screens.'
            'It is very intersting',
          image: Image.asset('image/iamge1.jpg'),
          decoration: getPageDecoration()//텍스트, 배경색 등 페이지 전반의 구성요소들로 이루어짐
        ),
        PageViewModel(
            title: 'Welcome to my app',
            body: 'This is the second page'
                'We ar making on-boarding screens.'
                'It is very intersting',
          image: Image.asset('image/image2.jpg'),
            decoration: getPageDecoration()
        )
        ,PageViewModel(
            title: 'Welcome to my app',
            body: 'This is the third page'
                'We ar making on-boarding screens.'
                'It is very intersting',
          image: Image.asset('image/image3.jpg'),
            decoration: getPageDecoration()
        ),
      ],
      done: const Text('done'), // 온보딩페이지 끝난후 실행될 것
      onDone: () { //버튼의 onpressed와 같은 기능
        Navigator.of(context).pushReplacement( //pushReplacement : 온보딩 페이지를 끝내고 나가면 뒤로갈수 없음
          MaterialPageRoute(builder: (context) => const MyPage()),
        );
      },
      next: const Icon(Icons.arrow_forward),
      showSkipButton: true, // 스킵기능. 가장 마지막 페이지로 이동
      skip: const Text('Skip'),
      dotsDecorator: DotsDecorator(// 온보딩 페이지이 아래 이동할 수 있는 점들에 대한 스타일
        color: Colors.blue,
        size: const Size(10, 10),
        activeSize: const Size(20, 10), // 움직일때 커지는 사이즈. 해당 온보딩페이지에 있을때 점이 커짐
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24)
        ),
        activeColor: Colors.red, // 활성화된 점의 색상 지정
      ),
      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
  );
}