[flutter] 플러터 Column을 이용한 스크롤 가능한 뷰 만들기

20 Dec 2023

flutter

Flutter는 다양한 위젯을 통해 다양한 모바일 애플리케이션 레이아웃을 손쉽게 구축할 수 있는 기능을 제공합니다. 이번에는 Flutter의 Column 위젯을 사용하여 스크롤이 가능한 뷰를 만드는 방법에 대해 알아보겠습니다.

1. `SingleChildScrollView`와 `Column`의 조합 활용

가장 간단한 방법으로, SingleChildScrollView와 Column을 조합하여 스크롤이 가능한 뷰를 만들 수 있습니다. 이 방법은 주로 높이가 화면을 벗어나는 경우에 사용됩니다.

import 'package:flutter/material.dart';

class ScrollableColumnView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Column View'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Your widgets here
          ],
        ),
      ),
    );
  }
}

2. `ListView`와 `Column`의 조합 활용

다른 방법으로, ListView와 Column을 조합하여 스크롤이 가능한 뷰를 만들 수 있습니다. 이 방법은 주로 동적인 아이템이 추가되는 경우에 적합합니다.

import 'package:flutter/material.dart';

class ScrollableColumnView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Column View'),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            children: [
              // Your widgets here
            ],
          ),
        ],
      ),
    );
  }
}

두 가지 방법 중에서 애플리케이션에 맞게 적합한 방법을 선택하여 스크롤 가능한 뷰를 구현할 수 있습니다.

위와 같은 방법들을 통해, Flutter에서 Column을 이용하여 스크롤이 가능한 뷰를 만드는 방법을 알아보았습니다.

참고문헌:

Flutter SingleChildScrollView: https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
Flutter ListView: https://api.flutter.dev/flutter/widgets/ListView-class.html

1. SingleChildScrollView와 Column의 조합 활용

2. ListView와 Column의 조합 활용

1. `SingleChildScrollView`와 `Column`의 조합 활용

2. `ListView`와 `Column`의 조합 활용