ListView와 SingleChildScrollView (새로 스크롤, 가로 스크롤)

1. ListView

ListView는 새로 스크롤을 생기게 하는 방법이다.

일단 처음 코드를 보도록 한다

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Column(
        children: [
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
        ],
      ),
    );
  }
}

body 쪽을 집중해서 보자

Column안에 children이 있고 아이콘을 여러 개 있는 코드이다.

에뮬레이터를 보면 아래와 같이 표시가 된다

에뮬레이터를 잘보면 하단 쪽에 노란색과 검은색 호랑이 무늬가 있는데,

이건 좀 더아래에 아이콘은 있지만 볼 수가 없다는 것이다. 그리고 스크롤을 아래로 내릴 수가 없다

왜냐면 Column이기 때문이다.

 

그래서 ListView로 바꿔주도록 한다

Column부분을 ListView로 바꿔 보니, 아래와 같이 나왔다

스크롤도 내릴 수 있게 되었다.

 

2. SingleChildScrollView

이번에는 가로 스크롤을 만들어 볼 것이다.

다시 처음 코드로 돌아와서

main.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Row(
        children: [
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
        ],
      ),
    );
  }
}

Row로 사용하면, 아래와 같이 나온다

가로배치

이 경우도 오른쪽에 호랑이가 생겼다

스크롤을 붙여보도록 하자

 

코드를 위와 같이 수정했다.

SingleChildScrollView()

이 코드를 Row를 감싸주고 Row위에는 【scrollDirection: Axis.horizontal,】 를 넣어준다

 

그러면 위와같이 호랑이가 없어져 있는 것을 볼 수 있다.

스크롤도 잘된다.