flutter & dart - SingleChildScrollView

Overview

이번에는 좀 중요한 녀석이다 이 녀석을 안쓰고 잘못하면 이상하게 될 수 있기 때문이죠.

일단 바로 목차부터

1. SingleChildScrollView
2. SingleChildScrollView 그래서 왜 쓰는데?

 

0. 문서

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

SingleChildScrollView class - widgets library - Dart API

 

1. SingleChildScrollView

단일 위젯을 스크롤할 수 있는 상자입니다.

이 위젯은 예를 들어 시간 선택기의 시계 문자판과 같이 일반적으로 전체가 표시되는 단일 상자가 있을 때 유용하지만 컨테이너가 한 축(스크롤 방향)에서 너무 작아지면 스크롤할 수 있는지 확인해야 합니다. ).

대화 상자나 팝업 메뉴에서 볼 수 있듯이 두 축(기본 스크롤 방향과 교차 축)을 축소해야 하는 경우에도 유용합니다. 이 경우 SingleChildScrollView를 ListBody 하위 와 쌍으로 연결할 수 있습니다 .

 

코드 블록입니다.

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: buildSingleChildScrollView1(),
      ),
    );
  }



  // 1번
  SingleChildScrollView buildSingleChildScrollView1() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal, // 가로로 리스트를 뿌림
      child: Row(
        children: [
          Menu(),
          SizedBox(width: 15),
          Menu(),
          SizedBox(width: 15),
          Menu(),
          SizedBox(width: 15),
          Menu(),
          SizedBox(width: 15),
          Menu(),
          SizedBox(width: 15),
        ],
      ),
    );
  }
}

// 1번 메뉴
class Menu extends StatelessWidget {
  const Menu({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      constraints: BoxConstraints(
          minWidth: 100, minHeight: 50, maxWidth: 100, maxHeight: 50),
      color: Colors.orange,
      child: Text("메뉴 1"),
    );
  }
}

 

2. SingleChildScrollView 그래서 왜 쓰는데?

위를 보고 생각이 들겁니다

" 야 이건 ListView 에서 가능한 기술이자너 쓰는 이유가 없잖아 "

 

네, 그럼 다음을 함께 보시죠

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: buildSingleChildScrollView2(),
      ),
    );
  }

SingleChildScrollView buildSingleChildScrollView2() {
  return SingleChildScrollView(
    child: Column(
      children: [
        Container(
          height: 50,
          color: Colors.green,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 100,
            itemBuilder: (context, index) => Text("메뉴1"),
          ),
        ),
        Container(
          height: 600,
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) => Text("메뉴 2"),),
        )
      ],
    ),
  );
}

 

와 둘이 따로 놀아 ㅋㅋㅋㅋㅋㅋ

뭐 이런식으로 꾸밀 수도 있겠지만 좀 같이 움직이면 좋지 않을까라는 생각하시는 당신! 당신에게 필요한 상품이 있습니다!

바로 SingleChildScrollView!!! 지금 전화 주시면 한달에 무려 1,0 ...

 

음 네 같이 움직이면 좋겠죠

 

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: buildSingleChildScrollView2(),
      ),
    );
  }

  SingleChildScrollView buildSingleChildScrollView2() {
    return SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 50,
              color: Colors.green,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 100,
                itemBuilder: (context, index) => Text("메뉴1"),
              ),
            ),
            Column(
              children: List.generate(
                100,
                    (index) => Text("메뉴 2"),
              ),
            ),
          ],
        ),
      );
  }
}

 

이 처럼 둘이 따로 놀게 하고싶다면 Listview 를 두개 사용해도 되지만 같이 단일로 움직이게 하고 싶다면 SingleChildScrollView 도 고려해 볼만 합니다.