7. [Flutter] ListView 사용하기

이전 시간에 만들었던 page_dump.dart에 ListView 위젯을 사용하여 리스트에 있는 아이템을 노출시켜 보도록 하겠습니다.

 

ListView의 Item으로 사용할 객체를 따로 생성하기 위해 models 라는 폴터를 생성하고 거기에 entity_dump.dart를 생성하겠습니다.

Dump라는 객체를 먼저 생성하고, Dump를 item으로 갖는 List인  DumpList를 생성하도록 하겠습니다.

---

객체 생성.

entity_dump.dart

import 'package:flutter/material.dart';

enum Level { easy, nomal, hard }

class Dump {
  late final String title, content;
  Level level;
  IconData icons;
  Dump(this.title, this.content, this.level, this.icons);
}

class DumpList {
  late final List<Dump> dumplist = [];
  DumpList.creatDumpList() {
    dumplist.add(
    	Dump('title1', 'content1', Level.easy, Icons.ac_unit_outlined));
    dumplist.add(
        Dump('title2', 'content2', Level.nomal, Icons.accessibility_new_sharp));
    dumplist.add(
    	Dump('title3', 'content3', Level.hard, Icons.adb_rounded));
    dumplist.add(
    	Dump('title4', 'content4', Level.easy, Icons.audiotrack_outlined));
  }
}

- enum을 사용하여 {easy, nomal, hard} 중 하나의 값을 갖는 새로운 데이터형인 Level을 선언해줍니다.

- Dump는 String형인 title, content 와 Icon에 사용할 IconData 그리고 enum으로 새롭게 만든 Level을 갖도록 선언해줍니다.

 

- DumpList는 Dump를 item으로 갖는 List형으로 다음과 같이 List<Dump> dumplist =[]; 선언해줍니다.

- DumpList.creatDumpList라는 named constructor를 사용하면 dumplist에 값을 넣어주도록 작성합니다.

 

named constructor는 Dart에만 있는 생성자 문법이며, 아래 내용을 참고해주세요.

named constructor(이름이 있는 생성자)는 클래스에 정의된 별도의 생성자로, 클래스의 인스턴스를 생성하는 데 사용됩니다. Named constructor는 클래스 내에 생성자를 여러 개 만들 수 있게 해주며, 생성자 호출 시 사용할 이름을 지정할 수 있습니다.
Named constructor는 기본 생성자와 다르게 클래스 이름 다음에 점(.)과 생성자 이름을 붙여서 호출합니다. 예를 들어, MyClass 클래스에 namedConstructor 이름의 named constructor를 추가하면 다음과 같이 호출할 수 있습니다.

 

 

자주 사용되는 late, final, const 키워드는 아래 설명 참조하시면됩니다.

late: 지연 초기화(lazy initialization)를 수행하기 위한 키워드입니다. 변수나 상수를 선언할 때 값이 바로 초기화되지 않고, 이후에 초기화될 수 있도록 합니다. 이를 통해 선언 시점에서는 값을 할당하지 않아도 됩니다. 다만, 해당 변수나 상수를 사용하기 전에 반드시 초기화해야 합니다. late 키워드는 클래스 멤버 변수에서만 사용할 수 있습니다.

final: 한 번 할당된 이후에는 변경할 수 없는 값을 선언하기 위한 키워드입니다. 선언 시점에 값을 할당해주어야 하며, 이후에는 변경이 불가능합니다. 또한, 변수나 상수 모두에서 사용 가능합니다.

const: 컴파일 시점에 결정되는 상수(constant) 값을 선언하기 위한 키워드입니다. 선언 시점에 값을 할당해주어야 하며, 이후에는 변경이 불가능합니다. const 키워드는 변수나 상수 모두에서 사용 가능합니다. const 키워드로 선언된 변수나 상수는 메모리의 상수 공간에 저장되어 재사용될 수 있습니다. 또한, 컴파일 시점에 값을 결정하므로, 실행 시점에서 성능이 우수합니다.

---

위젯 작성.

page_dump.dart

import 'package:flutter/material.dart';
import 'package:flutter_tonetrainer/models/entity_dump.dart';

class PageDump extends StatelessWidget {
  PageDump({super.key});
  final DumpList dumpList = DumpList.creatDumpList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 100),
          child: ListView.separated(
            scrollDirection: Axis.vertical,
            itemCount: dumpList.dumplist.length,
            separatorBuilder: (context, index) {
              return const SizedBox(
                height: 40,
                width: 10,
              );
            },
            itemBuilder: (context, index) {
              var dumpl = dumpList.dumplist[index];
              return Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 80, vertical: 80),
                decoration: BoxDecoration(
                    color: Colors.amber.shade800,
                    borderRadius: const BorderRadius.all(Radius.circular(20))),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Icon(
                          dumpl.icons,
                          size: 30,
                        ),
                        Text(
                          dumpl.title,
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 30),
                        )
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          dumpl.level.name,
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 30),
                        ),
                        Text(
                          dumpl.content,
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 25),
                        )
                      ],
                    )
                  ],
                ),
              );
            },
          )),
    );
  }
}

---

설명.

ListView

여기서 separatorBuilder 를 사용하기위해 ListView.separated 위젯을 생성합니다.

- itemCount: item의 최대 갯수를 입력해줍니다.

- scrolDirection: ListView 스크롤 방향을 설정합니다.

- separatorBuilder: item 위젯 사이 사이에 다른 위젯을 사용할 수 있게 도와줍니다.
- itemBuilder: List Item을 적용할 위젯을 만들어주는 속성입니다.

 itemBuilder: (context, index) {

              var dumpl = dumpList.dumplist[index];

dumpl 로 dumpList.dumplist의 아이탬들을 모두 받고 item에 들어있는 객체 값 들을 위젯에 사용합니다.

                        Icon(

                          dumpl.icons,

                          size: 30,

                        ),

                        Text(

                          dumpl.title,

                          style: const TextStyle(

                              fontWeight: FontWeight.bold, fontSize: 30),

                        )

---

[빌드된 모습]