Flutter 일기
참고 : https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

SingleChildScrollView

오늘 배울 것은 SingleChildScrollView.
말 그대로 스크롤 가능한 건데, 자식을 하나만 갖는다. 하나뿐인 자식이 너무 커서 화면에 다 안나오고 삐져나간다던지 할 때 스크롤을 해서 자식을 다 볼 수 있도록 해준다.

보통은 Row 나 Column 위젯과 자주 같이 쓴다. 나열하는 위젯이 많아져서 스크린에 다 나오지 못할 때 Row, Column을 SingleChildScrollView로 감싸주면 스크롤이 가능해지고, Rendering 에러가 나지 않게 된다.

코드 예시로 알아보자

색을 입힌 컨테이너를 나열하는 간단한 예시를 만들어보았다.
우선 SingleChildScrollView가 없을 때 이다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test SingleChildScrollView'),
      ),
      body: Column(
        children: [
          Container(
            // A fixed-height child.
            color: Colors.yellow.withOpacity(.5),
            height: 120.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          SizedBox(
            height: 50,
          ),
          Container(
            // Another fixed-height child.
            color: Colors.green.withOpacity(.5),
            height: 120.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
          SizedBox(
            height: 50,
          ),
          Container(
            // A fixed-height child.
            color: Colors.yellow.withOpacity(.5),
            height: 120.0,
            alignment: Alignment.center,
            child: const Text('Fixed Height Content'),
          ),
        ],
      ),
    );
  }
}

Column 안에 컨테이너 3개만 넣어보았는데, 화면 방향이 세로일 때는 괜찮지만 가로일 때는 에러가 나게 된다.

세로	가로

Column만 넣으면 화면에 위젯이 다 나타나지 못할 때 에러가 난다. 이것을 피하기 위해 SingleChildScrollView로 Column을 감싸서, 스크롤이 가능하도록 하는 것이다.

body: SingleChildScrollView(
        child: Column(
          children: [
          ...
          ],
        ),
     ),

위와 같이 Column이나 Row 위젯 외에도 단 한개의 위젯이 크기가 너무 커서 화면에 안나타날 때 사용해도 된다. 물론 그럴 일이 잘 없어서 Column, Row 와 함께 쓰는 것이 대부분이다.

사실 위의 예제처럼 스크롤 리스트의 위젯들이 항상 스크린의 너비와 같다면, ListView를 쓰는 것이 더 낫다고 한다. 그런데 공부하면서는 SingleChildScrollView를 쓰는 경우를 더 자주 봤다. 왜 그런지 정확히는 모르겠는데, Column이나 Row를 새 위젯으로 감싸는게 더 편리해서 그런것 같...기도 하고

암튼 오늘의 일기는 여기까지!