[Flutter Project] Scroll Navigation Package

https://pub.dev/packages/scroll_navigation

scroll_navigation | Flutter Package

 

✅ 패키지 소개

앞서 제작해 보았던 PageView를 이용한 UI와 비슷한 동작을 하는 패키지가 있어 사용해보았다.

참조 <https://iconoding.tistory.com/43?category=976785>

 

☑️Install

dependencies:
  scroll_navigation: ^1.3.2

 

✅패키지 사용

패키지 설명을 읽어보면 Icon 혹은 Title(Text) 중 사용이 가능했다.

난 게임의 제목을 이용해서 만들기 위해 TitleScrollNavigation Widget을 사용했다.

 

☑️Code

TitleScrollNavigation(
          bodyStyle:  const NavigationBodyStyle(
            physics: ClampingScrollPhysics()
          ),
          identiferStyle:  NavigationIdentiferStyle(
            color: const Color(0xffaecdff),
            width: 4.w,
          ),
          barStyle:  TitleNavigationBarStyle(
            activeColor: const Color(0xffaecdff),
            style:   TextStyle(fontSize: 15.sp,fontWeight: FontWeight.bold),
            padding: EdgeInsets.fromLTRB(40.w,40.h,40.w,20.h),
            spaceBetween: 40.w,
          ),
          pages: [
            WordGameSetting(),
            BombGameSetting(),
            BodyLanguageSetting(),
            LylicsGameSetting(),
            const AppInformation()
          ],
          titles: const [
            '초성게임',
            '폭탄게임',
            '몸으로 말해요',
            '가요능력평가',
            '앱 정보'
          ],
        ),

동작은 PageView와 비슷하지만 좀 더 animation이 추가 된 느낌이다.

굳이 쓸 이유 없이 제작이 가능해보이지만 코딩 시간과 코드를 좀 더 간략하게 해주어 간단한 앱을 제작할 때는 유용해 보인다.

 

✅사용결과