[flutter] Spacer 위젯을 이용하여 수직/수평 스크롤 가능한 뷰 구현하는 방법은?

21 Dec 2023

flutter

Flutter에서는 Spacer 위젯을 사용하여 수직 및 수평 스크롤 가능한 레이아웃을 만들 수 있습니다. Spacer 위젯은 자식 위젯 사이에 유연한 공간을 만들어주며, 이를 활용하여 스크롤이 가능한 레이아웃을 구성할 수 있습니다.

수직 스크롤 가능한 뷰 구현하기

아래는 Spacer를 사용하여 수직 스크롤이 가능한 뷰를 구현하는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('수직 스크롤 가능한 뷰'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                height: 100,
                color: Colors.red,
              ),
              Spacer(),
              Container(
                height: 100,
                color: Colors.blue,
              ),
              Spacer(),
              Container(
                height: 100,
                color: Colors.green,
              ),
              Spacer(),
              Container(
                height: 100,
                color: Colors.yellow,
              ),
              Spacer(),
              Container(
                height: 100,
                color: Colors.orange,
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서 Spacer 위젯은 각 컨테이너 사이에 공간을 만들어주어, SingleChildScrollView를 통해 수직 스크롤이 가능한 뷰를 만들었습니다.

수평 스크롤 가능한 뷰 구현하기

수평 스크롤이 가능한 뷰를 구현하는 방법도 비슷합니다. 아래는 Spacer를 사용하여 수평 스크롤이 가능한 뷰를 구현하는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('수평 스크롤 가능한 뷰'),
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),
              Spacer(),
              Container(
                width: 100,
                color: Colors.blue,
              ),
              Spacer(),
              Container(
                width: 100,
                color: Colors.green,
              ),
              Spacer(),
              Container(
                width: 100,
                color: Colors.yellow,
              ),
              Spacer(),
              Container(
                width: 100,
                color: Colors.orange,
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서도 Spacer 위젯을 사용하여 각 컨테이너 사이에 공간을 만들어주어, SingleChildScrollView의 scrollDirection을 Axis.horizontal로 설정하여 수평 스크롤이 가능한 뷰를 만들었습니다.

위와 같이 Spacer 위젯을 활용하여 수직 및 수평 스크롤이 가능한 뷰를 구현할 수 있습니다. Flutter에서 Spacer 위젯은 레이아웃을 유연하게 조정하는 데 유용하게 활용될 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참조하시기 바랍니다.