[flutter] 6...PageView(Onboarding Page, scrollDirection, List, itemCount)

날이 너무 춥다....

가을옷 꺼낸지 일주일 된거같은데 벌써 겨울옷을 꺼내야할듯하다.

 

점점 플러터를 공부할수록 자신감이 붙으면서

프로젝트를 빨리 시작하고싶다.

그러나 아직 터무니없이 부족하단걸 느끼기에...

기본기 부터 탄탄하게 해야겠다.

 

오늘은 PageView를 해보자

이처럼 스크롤을 하여 페이지를 넘기는것이다.

이번 시간엔 라이브러리 import없이 진행한다.

 

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'onboarding Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: welcomePage(),
    );
  }
}

main.dart 파일 코드이다.

 

각 페이지에 사용할 이미지를 프로젝트 파일에 넣고 pub get 해주자.

welcomePage.dart 파일을 만들어 코드를 작성하자

 

먼저 statefull widget을 만든다.

body 안에 PageView.builder을 작성해준다.

 

안에 scrollDirection: Axis. 을 하면 3가지가 나오는데

horizontal - 가로 스크롤

vertical -  세로 스크롤

이렇게 이해하면 된다.

 

이제 assets한 이미지 갯수만큼 페이지를 만들어야하기에 먼저 이미지를 리스트화 시켜주자.

사진과 같이 코드를 작성하면 된다,

" " 에 들어갈 텍스트는 이미지소스의 경로이다.

이렇게 하면 길이가 3인 images 라는 String 형 리스트를 만든것이다.

 

itemCount - 이미지가 총 3개이니 3 or images.length 로 하면 되지만 가독성을 위해 후자로 해준다.

 

itemBuilder - 각 페이지를 구성 해준다.

image 지정을 위해 AssetImage(images[index]) 해주자.

이렇게 작성하면 인덱스 0부터 끝까지 페이지마다 구성된다.

지정된 이미지 사이즈가 다를 수 있으니 높이와 너비를 맞춰주자.