[Flutter] SingleChildScrollView(기본 스크롤)

✍ SingleChildScrollView Widget

가장 기본적인 스크롤 가능한 위젯이다. child 인자에 원하는 위젯(ex. Column)을 넣으면 기본 값으로 위젯이 화면 사이즈를 넘게 되면 스크롤이 가능하고 화면 사이즈를 넘지 않으면 기본 위젯으로만 작동한다. SingleChildScrollView 위젯은 child 에 있는 위젯을 한번에 그린다. 즉, child 에 Column 위젯을 넣었는데 children list 의 길이가 100이면 100개 한번에 생성된다. 따라서 들어가는 위젯이 많으면 비용 면에서 비효율적일 수 있다.

 

SingleChildScrollView(
  child: Column(
    children:  [
      Colors.red, Colors.yellow, Colors.green,
      Colors.blue, Colors.indigo, Colors.deepPurple
    ].map((e) => Container(height: 300, color: e)).toList(),
  ),
);

 

 

😶 가로 스크롤 vs 세로 스크롤(default)

scrollDirection 인자로 세로 스크롤(Axis.vertical), 가로 스크롤(Axis.horizontal)을 정할 수 있다. 세로 스크롤일 때는 세로와 관련된 위젯(ex. Column) 가로 스크롤일때는 가로와 관련된 위젯(ex. Row)을 사용해야 한다. 기본 값은 Axis.vertical 이다.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children:  [
      Colors.red, Colors.yellow, Colors.green,
      Colors.blue, Colors.indigo, Colors.deepPurple
    ].map((e) => Container(width: 300, color: e)).toList(),
  ),
),

 

 

 

😶 키보드 컨트롤

keyboardDismissBehavior 인자를 사용하면 SingleChildScrollView 에 TextField 와 같이 입력 폼이 포함될 때, 사용자가 TextField 를 클릭 시 키보드가 올라왔을 때 스크롤 시 키보드가 자동으로 내려갈지(manual) 아니면 온전히 사용자에 맡길지(스크롤 시 자동으로 키보드가 내려가지 않음, onDrag) 정할 수 있다.

SingleChildScrollView(
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual  
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag
);

 

 

 

😶 스크롤 모양

physics 인자를 사용하면 스크롤 모양을 설정할 수 있다.

 

인자(physics)	설명
NeverScrollableScrollPhysics	사용자가 스크롤 불가능하다.
AlwaysScrollableScrollPhysics	항상 사용자가 스크롤을 가능하게 하고 스크롤 모양은 기종 기본값을 따른다.
BouncingScrollPhysics	IOS 기본 스크롤 모양으로, 튕기는 모양이다.
ClampingScrollPhysics	AOS 기본 스크롤 모양이다.

 SingleChildScrollView(
  physics: AlwaysScrollableScrollPhysics(),
);

 

 

+ BouncingScrollPhysics 가 적용된 상태에서 위젯이 화면 크기보다 작을 때 스크롤 시 잘려 보일 수 있다. clipBehavior 를 Clip.none 로 하면 위젯이 잘리지 않으면서 튕기는 스크롤 모양이 된다.

SingleChildScrollView(
  physics: AlwaysScrollableScrollPhysics(),
  clipBehavior: Clip.none,
  ...
);

문제 화면