Flutter PageView , indicator

 

 

외식업은 부가세 계산하기가 까다롭다. .

 

정부에서 세제혜택을 주기 때문이다. 

 

그래서 그 부분에 대한 안내가 필요할 것 같아서 어떻게 보여줘야 하나 고민을 많이 했다. 

 

첫 화면에 계산기 답게 입력칸이 보이고 그 칸을 다 채운 후 버튼을 누르면 

 

안내 사항을 보여주기로 했다. 

 

 

 

처음에는 사진 한 장으로만 내용을 채우려다보니 글자가 너무 작아져서 가독성이 좋지 않았다. 

결국 PageView와 indicator 를 사용하기로 했다. 

 

두 개다 패키지를 사용했다. 

 

 

expandable_page_view | Flutter Package (pub.dev)

expandable_page_view | Flutter Package

위 패키지는 Page_view의 크기를 각자 다르게 설정도 가능했다. 

 

 

indicator 로는 아래 패키지를 사용했다. 

smooth_page_indicator | Flutter Package (pub.dev)

smooth_page_indicator | Flutter Package

 

적용된 코드이다.  

ExpandablePageView 위젯을 만들고 

Column으로 감싸준다. 

 

Sizedbox안에 이미지를 넣고 

그 아래에 SmoothPageIndicator를 넣어주어서 

컨트롤러를 Pageview의 컨트롤러와 맞춰준다. 

 

ExpandablePageView(controller: p1, children: [
              Column(
                children: [
                  SizedBox(
                    width: 280,
                    height: 280,
                    child: Image.asset(
                      'assets/image/information1.png',
                      fit: BoxFit.fill,
                    ),
                  ),
                  SmoothPageIndicator(
                    controller: p1,
                    count: 3,
                    axisDirection: Axis.horizontal,
                    effect: SlideEffect(
                      activeDotColor: Colors.black,
                      dotHeight: 10,
                      dotColor: Colors.black26,
                      dotWidth: 10,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  SizedBox(
                    width: 280,
                    height: 280,
                    child: Image.asset(
                      'assets/image/information2.png',
                      fit: BoxFit.fill,
                    ),
                  ),
                  SmoothPageIndicator(
                    controller: p1,
                    count: 3,
                    axisDirection: Axis.horizontal,
                    effect: SlideEffect(
                      activeDotColor: Colors.black,
                      dotHeight: 10,
                      dotColor: Colors.black26,
                      dotWidth: 10,
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  SizedBox(
                    width: 280,
                    height: 280,
                    child: Image.asset(
                      'assets/image/information3.png',
                      fit: BoxFit.fill,
                    ),
                  ),
                  SmoothPageIndicator(
                    controller: p1,
                    count: 3,
                    axisDirection: Axis.horizontal,
                    effect: SlideEffect(
                      activeDotColor: Colors.black,
                      dotHeight: 10,
                      dotColor: Colors.black26,
                      dotWidth: 10,
                    ),
                  ),
                ],
              ),
            ]),
          ),
        );

 

처음에 위 코드로 돌렸는데 

rendering관련 에러가  발생했다. 

 

이유는 위 Pageview는 Alertdialog를 리턴한다. 정해진 공간을 제시하지 않으면

해당 PageView의 크기를 계산할 수 없어서 화면에 나올 수 없게 되는 것이다. 

그래서 PageView위젯을 Container로 감싸주어야 한다. 

 

 

Container(
            width: 300,
            height: 300,
            child: ExpandablePageView(controller: p1, children: [
              Column(
                children: [
                  SizedBox(
                    width: 280,
                    height: 280,
                    child: Image.asset(
                      'assets/image/information1.png',
                      fit: BoxFit.fill,
                    ),
                  ),
                  SmoothPageIndicator(
                    controller: p1,
                    count: 3,
                    axisDirection: Axis.horizontal,
                    effect: SlideEffect(
                      activeDotColor: Colors.black,
                      dotHeight: 10,
                      dotColor: Colors.black26,
                      dotWidth: 10,
                    ),
                  ),

 

 

해결이 잘 되어서 다음과 같이 잘 나온다.