seong

Flutter - PageView, 페이지 이동 부드럽게 하기 본문

Flutter/Flutter

Flutter - PageView, 페이지 이동 부드럽게 하기

hyeonseong 2023. 8. 30. 21:28

PageView

- 페이지 이동시 부드럽게 이동할 수 있도록 해준다. 

소스코드

코드 설명 

- 총 3개의 페이지를 splash, 현재 페이지 구분을 위해 currentPage 변수 선언

- PageView.builder로 페이지 이동을 하고, onPageChanged 메서드로 현재 페이지를 전달해준다.

- 페이지 이동마다 아래 dot도 함께 변한다. -> AnimatedContainer를 사용

class _BodyState extends State<Body> {
  int currentPage = 0;
  List<Map<String, String>> splashData = [
    {
      "text": "Welcome to Tokoto, Let's shoop!",
      "img": "assets/images/splash_1.png",
    },
    {
      "text": "We help people conect with store \naround Uinited State of America",
      "img": "assets/images/splash_2.png",
    },
    {
      "text": "We show the easy way to shop. \nJust stay at home with us",
      "img": "assets/images/splash_3.png",
    },
  ];
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Column(
          children: [
            Expanded(
              flex: 3,
              child: PageView.builder(
                onPageChanged: (value) {
                  setState(() {
                    currentPage = value;
                  });
                },
                itemCount: splashData.length,
                itemBuilder: (context, index) => SplashContent(
                  text: splashData[index]['text'],
                  img: splashData[index]['img'],
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: Column(
                children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: List.generate(
                        splashData.length,
                        (index) => buildDot(index: index),
                      ))
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  AnimatedContainer buildDot({required int index}) {
    return AnimatedContainer(
      duration:Duration(milliseconds: 200); // 점의 모양이 변하는 시간 
      margin: const EdgeInsets.only(right: 5),
      height: 6,
      width: currentPage == index ? 20 : 6, // 현재 페이지 일 경우 점의 width는 20, 아닐경우 6
      decoration: BoxDecoration(
        color: currentPage == index ? kPrimaryColor : const Color(0xFFD8D8D8),
        borderRadius: BorderRadius.circular(3),
      ),
    );
  }
}

'Flutter > Flutter' 카테고리의 다른 글

Flutter - AnimatedTextKit  (0) 2023.09.04
Flutter - TweenAnimatedBuilder 위젯  (0) 2023.09.02
Flutter - Spacer 위젯, 공간 여분 주기  (0) 2023.08.30
Flutter - maxLine으로 높이가 불규칙 할 경우  (0) 2023.08.30
Flutter Animation 효과들 정리 글 링크  (0) 2023.08.24
'Flutter/Flutter' Related Articles more