Flutter 기초 - SingleChildScrollView (13)

 

Flutter 기초 - SingleChildScrollView (13)

 

 SingleChildScrollView

 - 단일 자식 위젯에 스크롤 기능을 추가할 수 있도록 해주는 위젯으로 수직 스크롤과 수평 스크롤 두가지 사용방식이 있다.

 

1. SingleChildScrollView  (Vertical Scroll)

 - 수직 스크롤은 Column위젯과 함께 사용되며 목록, 이미지, 텍스트 등의 요소들을 수직 방향으로 스크롤할 수 있도록 한다.

 - SingleChildScrollView의 기본 스크롤 방향으로 Column위젯을 사용해 위젯을 수직으로 나열한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Vertical Scroll Example'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: List.generate(20, (index) =>
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('Item $index', style: TextStyle(fontSize: 24)),
                ),
              ),
          ),
        ),
      ),
    ),
  ));
}

 

2. SingleChildScrollView (Horizontal Scroll)

 - 수평 스크롤은 Row위젯과 함께 사용되며 이미지 갤러리, 메뉴바, 카드 리스트 등에서 여러 개의 요소를 가로 방향으로 배열하고자 할때 사용한다. 

 - 스크롤 방향을 수직과는 다르게 수평으로 설정하려면 scrollDirection속성에 명시적으로 Axis.horizontal로 설정해야 자식 위젯을 수평 방향으로 스크롤을 가능하게 한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Scroll Example'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(10, (index) =>
          Container(
            width: 160,
            height: 160,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Box &index',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    ),
    )));
}