[Flutter] SingleChildScrollView의 중앙에 위젯 배치하기

이번 포스트에서는 SingleChildScrollView의 중앙에 위젯을 배치하는 방법을 알아보겠습니다.

의문점

SingleChildScrollView 내부 위젯에 중앙에 배치하는 방법은 Center 위젯과 같이 일반적인 방법으로는 배치할 수 없습니다.

어찌보면 당연한 해결 방법이지만 여러 위젯을 추가해야 하므로 해결 방법을 정리해놓고자 합니다. 

해결 방법

LayoutBuilder(
  builder: (context, constraints) => RefreshIndicator(
    onRefresh: _onRefresh,
    child: SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minHeight: constraints.maxHeight
        ),
        child: IntrinsicHeight(
          Column(
            children: [
              // 내부 위젯 배치
            ]
        )
      )
    )
  )
)

중앙에 위젯을 배치하는 방법은 먼저, SingleChildScrollView를 LayoutBuilder 위젯으로 감싸줍니다.

그리고 IntrinsicHeight 위젯과 ConstrainedBox 위젯의 속성으로 감싸주고 ConstrainedBox의 minHeight 속성으로 constraints.maxHeigh 을 부여해줍니다.

그러면 SingleChildScrollView 하위 위젯이 스크롤이 활성화되지 않을 만큼의 공간을 차지하고 있을경우 전체 공간을 차지하게 되고 중앙에 배치됩니다.

 

* 참고로 RefreshIndicator 클래스는 pull_to_refresh의 패키지가 아닌 flutter material의 패키지의 클래스를 사용했습니다.

 

스크린샷

SingleChildScrollView 중앙에 배치 스크린샷

 

References

https://medium.com/@roaakdm/flutter-scrollphysics-variations-use-cases-da87528cc6c1

Flutter ScrollPhysics Variations & Use Cases

 

https://stackoverflow.com/questions/50195259/refresh-indicator-without-scrollview

Refresh indicator without scrollview