Flutter - ScrollView

Flutter에서는 여러 종류의 스크롤 뷰를 제공하며, 각각 다양한 사용 케이스와 요구 사항에 맞춰져 있습니다. 주요 스크롤 뷰와 그들의 특징은 다음과 같습니다:

1. SingleChildScrollView

• 한 개의 자식만을 가질 수 있는 스크롤 뷰입니다.
• 자식 위젯이 화면보다 더 클 경우에 사용하며, 주로 화면을 벗어나는 텍스트 및 폼 필드 처리에 사용됩니다.

2. ListView

• 여러 자식 위젯을 가질 수 있는 스크롤 뷰입니다.
• 세로로 스크롤 가능한 리스트를 만들 때 사용합니다.
• ListView.builder를 통해 대량의 항목을 효율적으로 처리할 수 있습니다.

3. GridView

• 격자 모양의 스크롤 가능한 뷰를 생성합니다.
• 여러 컬럼에 걸쳐 있는 항목들을 표시할 때 유용합니다.
• GridView.builder를 사용하면 대량의 항목을 효율적으로 처리할 수 있습니다.

4. CustomScrollView

• 여러 다른 스크롤 뷰 타입들과 함께 사용할 수 있는 고급 스크롤 뷰입니다.
• 다양한 스크롤 가능한 위젯(예: Slivers)들을 혼합하여 사용할 수 있습니다.

5. PageView

• 스크롤이 가능한 페이지를 제공합니다.
• 수평으로 스크롤 가능하며, 한 번에 하나의 자식 위젯만 보여줍니다.
• 페이지 전환 효과나 슬라이드 쇼에 주로 사용됩니다.

6. NestedScrollView

• 바디 부분에서 스크롤이 가능한 스크롤 뷰입니다.
• 상단에 SliverAppBar를 포함하고 있어, 상단 부분이 스크롤될 때 다양한 효과를 줄 수 있습니다.
• 내부에 다른 스크롤 뷰를 포함할 수 있어, 복잡한 UI를 구성할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: SingleChildScrollView(
            // 주의! SingleChildScrollView는 단 하나의 자식만을 가질 수 있다.
            child: Column(
              children: [
                Container(
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  height: 200,
                  color: Colors.blue,
                ),
                Container(
                  height: 300,
                  color: Colors.green,
                ),
                Container(
                  height: 400,
                  color: Colors.orange,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

내리면 스크롤 뷰 됨