Flutter - SingleChildScrollView 위젯

• Column vs ListBody

Column을 사용해 위젯들을 나열하다 보면 화면의 크기를 넘어설 수 있다. 이때, 스크롤 기능이 필요하다.

이 위젯은, 하나의 자식을 스크롤할 수 있게 하는 위젯이다.

보통 column보다는 ListBody를 사용해 스크롤 위젯을 만든다. column은 위젯의 크기만큼 가로 길이를 가져 스크롤 가능 영역이 좁을 수 있기 때문이다.

 

• Colunm을이용한 SingleChildScroolView

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(
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        home: Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: const Text("제목"),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: [
          Container(
            height: 220,
            color: Colors.deepOrangeAccent,
            child: const Text("Flutter Flutter",
                style: TextStyle(fontSize: 100, color: Colors.white)),
          ),
          Container(
            height: 100,
            color: Colors.blueGrey,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.deepOrangeAccent,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.lightBlue,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.cyan,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.brown,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          )
        ],
      )),
    ));
  }
}

 

 

• Listbody 를이용한 singlechildscrollview

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(
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        home: Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: const Text("제목"),
      ),
      body: SingleChildScrollView(
          child: ListBody(
        children: [
          Container(
            height: 220,
            color: Colors.deepOrangeAccent,
            child: const Text("Flutter Flutter",
                style: TextStyle(fontSize: 100, color: Colors.white)),
          ),
          Container(
            height: 100,
            color: Colors.blueGrey,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.deepOrangeAccent,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.lightBlue,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.cyan,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          ),
          Container(
            height: 100,
            color: Colors.brown,
            child: const Text("Flutter",
                style: TextStyle(fontSize: 100, color: Colors.blue)),
          )
        ],
      )),
    ));
  }
}