<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/Flutter"><span>Flutter</span></a></p><h3>코딩쉐프 Flutter Onboarding screen 따라하기</h3>
                </div><p><cite>Berno</cite>
                  <span> 2022. 4. 19. 21:27</span>
                </p><div>
                                <h3 data-ke-size="size23"><span><b><span>0. 들어가며</span></b></span></h3>
<p data-ke-size="size16"><span><a href="https://www.youtube.com/watch?v=FAi7mTyKW60&amp;list=PLQt_pzi-LLfo1sKDaFN1SOuDVP85OwK4M">https://www.youtube.com/watch?v=FAi7mTyKW60&amp;list=PLQt_pzi-LLfo1sKDaFN1SOuDVP85OwK4M</a>&nbsp;</span></p>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=FAi7mTyKW60" data-video-thumbnail="https://scrap.kakaocdn.net/dn/SEszb/hyN6XlLb9J/1PXjJ4Km293sJ6ySYgVFs1/img.jpg?width=480&amp;height=360&amp;face=0_0_480_360" data-video-width="480" data-video-height="360" data-video-origin-width="480" data-video-origin-height="360" data-ke-mobilestyle="widthContent"><iframe src="https://www.youtube.com/embed/FAi7mTyKW60" width="480" height="360" frameborder="" allowfullscreen=""></iframe>
<figcaption></figcaption>
<img src="https://scrap.kakaocdn.net/dn/SEszb/hyN6XlLb9J/1PXjJ4Km293sJ6ySYgVFs1/img.jpg?width=480&amp;height=360&amp;face=0_0_480_360"></figure>
<p data-ke-size="size16"><span>역시 따라하면서 배우는게 최고다..</span></p>

<h3 data-ke-size="size23"><span><b><span>1. Onboarding screen??</span></b></span></h3>
<p data-ke-size="size16"><span>Onboarding이라는 뜻 자체가 처음 합류하기 위해 적응하는 과정을 의미한다. 아래 예시처럼 맨 처음 앱을 실행했을 때 요약해서 설명해주는 창을 많이 봤을텐데 그걸 Onboarding screen이라고 한다.</span></p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1280" data-origin-height="960">
    <span data-url="https://k.kakaocdn.net/dn/10dKY/btrzQZM3D6S/z3e3IFAIcDFoeCDgCWyKKk/img.png" data-lightbox="lightbox" data-alt="출처 :&amp;nbsp;https://www.pinterest.co.kr/pin/540361655291484614/">
        <img src="https://k.kakaocdn.net/dn/10dKY/btrzQZM3D6S/z3e3IFAIcDFoeCDgCWyKKk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="641" height="481" data-origin-width="1280" data-origin-height="960">
    </span>
    <figcaption>출처 :&nbsp;https://www.pinterest.co.kr/pin/540361655291484614/</figcaption>
</figure>
<h3 data-ke-size="size23"><span><b><span>2. 여기서 배운 것들</span></b></span></h3>
<ul data-ke-list-type="disc">
<li><span>introduction_screen 3.0.2 패키지</span></li>
<li><span>페이지간의 이동</span></li>
</ul>

<h3 data-ke-size="size23"><span><b><span>3. 설명</span></b></span></h3>
<p data-ke-size="size16"><span>Onboarding screen은 하드코딩할 수 있지만 쉽게 하기 위해 아래 패키지를 사용한다.</span></p>
<p data-ke-size="size16"><span><a href="https://pub.dev/packages/introduction_screen" target="_blank" rel="noopener">https://pub.dev/packages/introduction_screen</a></span></p>
<figure id="og_1650368722214" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="introduction_screen | Flutter Package" data-og-description="Introduction/Onboarding package for flutter app with some customizations possibilities" data-og-host="pub.dev" data-og-source-url="https://pub.dev/packages/introduction_screen" data-og-url="https://pub.dev/packages/introduction_screen" data-og-image="https://scrap.kakaocdn.net/dn/baFSYU/hyN5Eg3iwh/GOnPsApAOwMqhzQW3M5bq0/img.png?width=1280&amp;height=640&amp;face=0_0_1280_640,https://scrap.kakaocdn.net/dn/bPGQCy/hyN5ATeShk/VYtz63jbPmN7TWQBHlf7vk/img.png?width=1280&amp;height=640&amp;face=0_0_1280_640"><a href="https://pub.dev/packages/introduction_screen" target="_blank" rel="noopener" data-source-url="https://pub.dev/packages/introduction_screen">

<div>
<p data-ke-size="size16">introduction_screen | Flutter Package</p>
<p data-ke-size="size16">Introduction/Onboarding package for flutter app with some customizations possibilities</p>
<p data-ke-size="size16">pub.dev</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/baFSYU/hyN5Eg3iwh/GOnPsApAOwMqhzQW3M5bq0/img.png?width=1280&amp;height=640&amp;face=0_0_1280_640,https://scrap.kakaocdn.net/dn/bPGQCy/hyN5ATeShk/VYtz63jbPmN7TWQBHlf7vk/img.png?width=1280&amp;height=640&amp;face=0_0_1280_640"></figure>
<p data-ke-size="size16"><span>IntroductionScreen을 return 해주면 되는데 argument가 직관적이다.</span></p>
<pre id="code_1650368798604" data-ke-language="java" data-ke-type="codeblock"><code>class OnBoardingPage extends StatelessWidget {
  const OnBoardingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: [
        PageViewModel(title: 'We are worker', body: 'We are developer', image: Image.asset('image/work1.jpg'), decoration: getPageDecoration()),
        PageViewModel(title: 'We are worker', body: 'We make code', image: Image.asset('image/work2.jpg'), decoration: getPageDecoration()),
        PageViewModel(title: 'We are worker', body: 'We hustle and hustle', image: Image.asset('image/work3.jpg'), decoration: getPageDecoration())
      ],
      done: const Text('done'),
      onDone: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) =&gt; const MyPage()),
        );
      },
      showBackButton: true,
      showDoneButton: true,
      showNextButton: true,
      // showSkipButton: true,
      next: const Icon(Icons.arrow_forward),
      back: const Icon(Icons.arrow_back),
      dotsDecorator: DotsDecorator(
        color: Colors.cyan,
        size: const Size(15, 15),
        activeSize: const Size(27, 15),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24)
        )
      ),
      curve: Curves.bounceOut,
    );
  }

  PageDecoration getPageDecoration(){
    return const PageDecoration(
      titleTextStyle: TextStyle(
        fontSize: 44,
        fontWeight: FontWeight.bold
      ),
      bodyTextStyle: TextStyle(
        fontSize: 34,
        color:  Colors.blue,
      ),
      imagePadding: EdgeInsets.only(top: 40),
      pageColor: Colors.orange,
    );
  }
}</code></pre>
<p data-ke-size="size16"><span>page argument에는 보여질 화면들을 넣어주면 된다. 들어가는 모델은 PageViewModel로 넣고 안에 이미지, 텍스트 등을 넣을 수 있다.</span></p>
<p data-ke-size="size16"><span>done argument에는 다 끝났을 때 보여지는 버튼을 넣으면 된다.</span></p>
<p data-ke-size="size16"><span>ondone argument는 해당 버튼을 눌렀을 때 행하는 액션이다.</span></p>
<p data-ke-size="size16"><span>skip button과 back button은 공존할 수 없다. 왜냐하면 같은 위치에 들어가기 때문이다.</span></p>
<p data-ke-size="size16"><span>curve argument는 화면 전환에 대한 animation이다.</span></p>
<p><span>dotsdecoration argument는 onboarding screen에서 각 page의 위치가 표시되는 점에 대해 꾸미는 argument다.</span></p><figure data-ke-mobilestyle="widthOrigin" data-origin-width="528" data-origin-height="161">
    <span data-url="https://k.kakaocdn.net/dn/bqx7yJ/btrzQHMHKlT/49Y1MoBFCT5mpgElvKBz00/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bqx7yJ/btrzQHMHKlT/49Y1MoBFCT5mpgElvKBz00/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="528" data-origin-height="161">
    </span>
    
</figure>

<h3 data-ke-size="size23"><span><b><span>4. 결과물</span></b></span></h3>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="634" data-origin-height="837">
    <span data-url="https://k.kakaocdn.net/dn/bjwWDm/btrzQXuOLa4/4DOK6u5P3EHG9s8JkY0unK/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bjwWDm/btrzQXuOLa4/4DOK6u5P3EHG9s8JkY0unK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="346" height="457" data-origin-width="634" data-origin-height="837">
    </span>
    
</figure>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="634" data-origin-height="837">
    <span data-url="https://k.kakaocdn.net/dn/EpHLH/btrzQX2BAVP/bcSIEDXEinVkK11e1zKRD0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/EpHLH/btrzQX2BAVP/bcSIEDXEinVkK11e1zKRD0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="344" height="454" data-origin-width="634" data-origin-height="837">
    </span>
    
</figure><figure data-ke-mobilestyle="widthOrigin" data-origin-width="634" data-origin-height="837">
    <span data-url="https://k.kakaocdn.net/dn/bQ0YfM/btrzQhN5XM8/Skww9kEyByplxLccwvrMz0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bQ0YfM/btrzQhN5XM8/Skww9kEyByplxLccwvrMz0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="340" height="448" data-origin-width="634" data-origin-height="837">
    </span>
    
</figure><figure data-ke-mobilestyle="widthOrigin" data-origin-width="634" data-origin-height="837">
    <span data-url="https://k.kakaocdn.net/dn/bmEuYv/btrzN2Knfcq/2nAU8ZHwR2kzRpoFBSaKIK/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bmEuYv/btrzN2Knfcq/2nAU8ZHwR2kzRpoFBSaKIK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="344" height="455" data-origin-width="634" data-origin-height="837">
    </span>
    
</figure>
            
            
                </div></div>

흔한 컴공출신 개발자

bernoyoun

0. 들어가며
https://www.youtube.com/watch?v=FAi7mTyKW60&list=PLQt_pzi-LLfo1sKDaFN1SOuDVP85OwK4M 
역시 따라하면서 배우는게 최고다..
 
1. Onboarding screen??
Onboarding이라는 뜻 자체가 처음 합류하기 위해 적응하는 과정을 의미한다. 아래 예시처럼 맨 처음 앱을 실행했을 때 요약해서 설명해주는 창을 많이 봤을텐데 그걸 Onboarding screen이라고 한다.
2. 여기서 배운 것들
introduction_screen 3.0.2 패키지
페이지간의 이동
 
3. 설명
Onboarding screen은 하드코딩할 수 있지만 쉽게 하기 위해 아래 패키지를 사용한다.
https://pub.dev/packages/introduction_screen
IntroductionScreen을 return 해주면 되는데 argument가 직관적이다.
class OnBoardingPage extends StatelessWidget {
  const OnBoardingPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: [
        PageViewModel(title: 'We are worker', body: 'We are developer', image: Image.asset('image/work1.jpg'), decoration: getPageDecoration()),
        PageViewModel(title: 'We are worker', body: 'We make code', image: Image.asset('image/work2.jpg'), decoration: getPageDecoration()),
        PageViewModel(title: 'We are worker', body: 'We hustle and hustle', image: Image.asset('image/work3.jpg'), decoration: getPageDecoration())
      ],
      done: const Text('done'),
      onDone: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => const MyPage()),
        );
      },
      showBackButton: true,
      showDoneButton: true,
      showNextButton: true,
      // showSkipButton: true,
      next: const Icon(Icons.arrow_forward),
      back: const Icon(Icons.arrow_back),
      dotsDecorator: DotsDecorator(
        color: Colors.cyan,
        size: const Size(15, 15),
        activeSize: const Size(27, 15),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24)
        )
      ),
      curve: Curves.bounceOut,
    );
  }
  PageDecoration getPageDecoration(){
    return const PageDecoration(
      titleTextStyle: TextStyle(
        fontSize: 44,
        fontWeight: FontWeight.bold
      ),
      bodyTextStyle: TextStyle(
        fontSize: 34,
        color:  Colors.blue,
      ),
      imagePadding: EdgeInsets.only(top: 40),
      pageColor: Colors.orange,
    );
  }
}
page argument에는 보여질 화면들을 넣어주면 된다. 들어가는 모델은 PageViewModel로 넣고 안에 이미지, 텍스트 등을 넣을 수 있다.
done argument에는 다 끝났을 때 보여지는 버튼을 넣으면 된다.
ondone argument는 해당 버튼을 눌렀을 때 행하는 액션이다.
skip button과 back button은 공존할 수 없다. 왜냐하면 같은 위치에 들어가기 때문이다.
curve argument는 화면 전환에 대한 animation이다.
dotsdecoration argument는 onboarding screen에서 각 page의 위치가 표시되는 점에 대해 꾸미는 argument다.
 
4. 결과물

코딩쉐프 Flutter Onboarding screen 따라하기

댓글