본문 바로가기

Flutter-플러터/플러터 공부

IntroScreen 패키지

반응형

https://www.fluttercampus.com/guide/129/how-to-create-onboarding-intro-screen-sliders-on-flutter/

 

How to create Onboarding Intro Screen Sliders on Flutter

Onboarding screens are a great way to introduce your app to users. But making screens, designs, animations is very hard for beginners. Here I have explained to make the Introduction screen easily with very few codes.

www.fluttercampus.com

 

 

위 링크를 참고를 했다. 

 

기본적인 코드는 아래와 같다. 

 

필수적인 요소가 있다. 

 

title, body를 꼭 넣어줘야 한다. 

 

UI구성 순서는 

 

image

title

body 

순서이다. 

 

위 순서를 바꿀 수 있는지는 잘 모르겠다. 

그래도 그냥 내용만 입력하면 편하다..!!

 

잘 적용된 모습..!

 

IntroductionScreen(
      globalBackgroundColor: Colors.green,
      //main background of screen
      pages: [
        //set your page view here
        PageViewModel(
          title: '부까 사용 안내',
          body: " 연매출 10억 이하 매장만 \n사용 권장합니다! \n "
              "\n  세금을 드라마틱 하게 줄여주는 \n계산기가 아닙니다.",
          image: Image.asset(
            'assets/image/001.png',
            fit: BoxFit.fill,
          ),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "계산된 예상 부가세와 실제 부가세가 차이나는 경우",
          body: ""
              "\n"
              "가.신용카드공제 23년 연말까지 \n1000만원 한도\n"
              "\n"
              "나.놓친 지출 증빙 자료가 있다.\n"
              "\n"
              "다.식자재 지출과 공산품 지출을 \n정확히 구분하지 않았다",
          image: Image.asset('assets/image/002.png'),
          decoration: pageDecoration,
        ),

        PageViewModel(
          title: "절세의 시작은 부가세입니다.",
          body: "\n"
              "사장님의 1년 부가세가 다음해의 종합소득세의 과세표준이 되며 종합소득세에 따라서 연금과 \n건강보험료가 측정됩니다.\n "
              "\n절세의 시작은 부가세!",
          image: Image.asset('assets/image/003.png'),
          decoration: pageDecoration,
        ),

        //add more screen here
      ],

      onDone: () => goHomepage(context), //go to home page on done
      onSkip: () => goHomepage(context), // You can override on skip
      showSkipButton: true,

      nextFlex: 0,

반응형