깡샘의 플러터&다트 프로그래밍 12-1

리스트 뷰

세로나 가로로 나열하면서 화면을 벗어날 때 스크롤을 지원하기 위해 사용한다.

ListView(
    children: [
    Container(
        color: Colors.red,
        height: 300,
    ),
    Container(
        color: Colors.green,
        height: 300,
    ),
    Container(
        color: Colors.blue,
        height: 300,
    ),
    ],
),

---

스크롤 기능

• scrollDirection 속성을 Axis.horizontal,vertical 사용

ListView로 여러 위젯을 스크롤 하는 것은 SingleChildScrollView + Column 조합과 똑같지 않나?

기능은 같지만 쓰이는 용도가 다릅니다. ListView는 똑같은 형태의 위젯을 세로로 출력에 최적화된 위젯이다.
다양한 형태라면 SingleChildScrollView + Column

---

항목을 스크롤에 따라 불러오기

• ListView.builder() 생성자에는 itemCount와 itemBuilder라는 속성을 설정한다.
  • itemCount는 리스트 뷰에 출력할 항목 수
  • itemBuilder는 항목을 구성하는 위젯을 만들어주는 함수

---

항목 구분자 설정하기 - ListView.seperated()

• 항목의 개수와 항목을 구성하는 위젯을 지정한다는 면에서 ListView.builder() 와 같다. + 구분자 제공

ListView.separated(
separatorBuilder: (context, index) {
    return const Divider(
        height: 4,
        color: Colors.black,
        );
    }
)

---

항목 구성하기

• ListTitle은 항목을 구성하는 위젯이다.
  • title: 가운데 오는 위젯
  • leading: 왼쪽에 오는 위젯
  • subtitle: title 아래 오는 위젯
  • trailing: title 뒤에 오는 위젯으로 오른쪽에 위치

---

Do it!실습 리스트 뷰 활용하기

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(ch12_1());
}

class User {
  String name;
  String phone;
  String email;
  User(this.name, this.phone, this.email);
}

class ch12_1 extends StatelessWidget {
  ch12_1({super.key});
  List<User> users = [
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
    User('Ralo', '010-0000-0000', 'ralo.com'),
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('practice'),
        ),
        body: ListView.separated(
          itemCount: users.length,
          itemBuilder: (context, index) {
            return ListTile(
                leading: const CircleAvatar(
                  radius: 25,
                  backgroundImage: AssetImage('images/Ralo.png'),
                ),
                title: Text(users[index].name),
                subtitle: Text(users[index].phone),
                trailing: const Icon(Icons.more_vert),
                onTap: () {
                  launchUrl(
                    Uri.parse('https://www.youtube.com/@RALO24'),
                  );
                });
          },
          separatorBuilder: (context, index) {
            return const Divider(
              height: 4,
              color: Colors.black,
            );
          },
        ),
      ),
    );
  }
}