본문 바로가기

개발/Flutter

스크롤(Scroll) 위젯

반응형

Flutter에서 스크롤 기능을 구현하기 위해서는 스크롤 가능한 위젯을 사용해야 합니다.

스크롤 위젯은 다양한 종류가 있으며, 각각의 특성에 따라 적절한 위젯을 선택하여 사용하면 됩니다.

SingleChildScrollView

SingleChildScrollView는 자식 위젯이 화면에 표시되기에 충분한 공간이 없을 때 사용됩니다. 주로 Column, Row와 같은 다른 위젯과 함께 사용됩니다.

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // 많은 수의 위젯이 있다고 가정
    ],
  ),
);

ListView

ListView는 스크롤 가능한 위젯을 나열할 때 가장 많이 사용됩니다. ListView는 스크롤 가능한 위젯의 컨테이너 역할을 하며, 다양한 속성을 설정하여 수직, 수평 방향으로 스크롤 가능합니다.

ListView(
  children: <Widget>[
    // 나열할 위젯
  ],
);

GridView

GridView는 2차원 그리드 모양으로 스크롤 가능한 위젯을 나열할 때 사용됩니다. ListView와 유사하게 다양한 속성을 설정하여 수직, 수평 방향으로 스크롤 가능합니다.

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 열 수
    childAspectRatio: 1.0, // 아이템의 가로세로 비율
  ),
  children: <Widget>[
    // 나열할 위젯
  ],
);

CustomScrollView

CustomScrollView는 다양한 스크롤 가능한 위젯을 함께 사용할 때 사용됩니다. SliverAppBar와 같은 Sliver 위젯과 함께 사용하여 고급스러운 UI를 구현할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      // 상단바
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        <Widget>[
          // 나열할 위젯
        ],
      ),
    ),
  ],
);

위와 같은 스크롤 위젯을 사용하여 다양한 화면을 구성할 수 있습니다.
이 외에도 다양한 스크롤 위젯이 존재하며, 상황에 맞게 사용하면 됩니다.

반응형

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

뷰(View) 위젯  (0) 2023.04.06
커스텀 위젯(Custom Widget)  (0) 2023.04.06
머티리얼(material) 디자인 위젯  (0) 2023.04.06
상태관리(State Management) 개념  (0) 2023.04.04
애니메이션(Animation) 개념  (0) 2023.04.04