[flutter]플러터 스크롤뷰 SingleChildScrollView 사용법

플러터 ListView 사용법

플러터 ReorderableListView 사용법

1. SingleChildScrollView

1) 기본 예제

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Text('첫 번째 항목'),
              Text('두 번째 항목'),
              Text('세 번째 항목'),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}

일반적으로 SingleChildScrollView의 child에 Column 위젯을 사용하고 컬럼 위젯 하위 위젯들을 스크롤 가능하도록 합니다.

 

2) SingleChildScrollView는 기본적으로 화면에서 오버플로우가 발생한 경우만 스크롤이 가능하도록 되어있습니다. 위젯이 화면을 넘어가지 않아도 스크롤이 가능하도록 변경하려면 physics 속성값을 AlwaysScrollableScrollPhysics()으로 설정하면 됩니다.

// NeverScrollableScrollPhysics - 스크롤 안됨
// AlwaysScrollableScrollPhysics - 스크롤 가능

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          child: Column(
            children: <Widget>[
              Text('첫 번째 항목'),
              Text('두 번째 항목'),
              Text('세 번째 항목'),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}

 

 

3) physics 속성을 변경하여 스크롤을 가능하게 한경우 스크롤시 위젯이 고정되어 잘리는 현상이 나타납니다. 이런 경우 clipBehavior속성 값을 Clip.none으로 설정하여 정상적으로 스크롤 되도록 할 수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          clipBehavior: Clip.none,
          physics: AlwaysScrollableScrollPhysics(),
          child: Column(
            children: <Widget>[
              Text('첫 번째 항목'),
              Text('두 번째 항목'),
              Text('세 번째 항목'),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}

 

 

4) physics 속성 4가지 정리 입니다.

// NeverScrollableScrollPhysics - 스크롤 안됨
// AlwaysScrollableScrollPhysics - 스크롤 됨
// BouncingScrollPhysics - iOS 스타일
// ClampingScrollPhysics - Android 스타일

ios 스타일 - 스크롤시 상단이 바운싱 형태로 떨어지는 스타일 (상단 앱바에서부터 위젯이 떨어지며 스크롤 됨)

android 스타일 - 스크롤시 상단 바운싱없이 당겨지는듯한 이펙트 효과