ListView and Builder Methods

지금 여러분은 여러분의 강아지를 위한 카드(역자주: 이전에 만들었던 DogCard)를 가지고 있고, 강아지들의 데이터를 목록으로 렌더링 하는 것이 더 유용 할 것이다.
플러터UI의 가장 중요한 개념중 하나는 빌더 메서드에서 자주 수행되는 UI목록 렌더링 이다.(rendering)
빌더 메서드는 기본적으로 Dart List 데이터의 각 데이터 조각에 대해 위젯을 생성한다.

첫번째로 dog_list.dart라는 신규 파일을 만들자.

1. DogList Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// dog_list.dart

import 'package:flutter/material.dart';

import 'dog_card.dart';
import 'dog_model.dart';

class DogList extends StatelessWidget {
  // 빌더 메서드는 목록(list)같은 데이터 집합에 의존한다.
  final List<Dog> doggos;
  DogList(this.doggos);

  // 우선, 빌드 메서드를 평범하게 만든다. 
  // 위젯을 리턴하는 대신에 위젯을 리턴하는 메서드를 리턴한다.
  // context를 전달하는걸 잊지 말자.
  @override
  Widget build(BuildContext context) {
    return _buildList(context);
  }

  // 빌더 메서드는 거의 항상 ListView를 리턴한다.
  // ListView는 Colum 또는 Row와 유사한 위젯이다.
  // ListView는 스크롤 가능 여부를 알 수 있다.
  // ListView는 builder라는 생성자를 가지고 있는데 이것은 목록으로 작동 할것 이라는 것을 알고 있다.

  ListView _buildList(context) {
    return ListView.builder(
      // item수와 같은 item 카운트를 반드시 가져야 한다!
      itemCount: doggos.length,
      // 위젯을 리턴하는 콜백이다.
      itemBuilder: (context, int) {
        // 우리의 경우 각각의 강아지에 대한 DogCard이다.
        return DogCard(doggos[int]);
      },
    );
  }
}

그리고 _MyHomePageState의 build메서드를 수정하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// main.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
      backgroundColor: Colors.black87,
    ),
    body: Container(
      // DogCard위제를 제거한다.
      // 대신 여러분은 새로운 DogList 클래스를 사용해라.
      // 
      // 위의 강아지 목록 데이터를 전달하라.
      child: Center( // Changed code
        child: DogList(initialDoggos), // Changed code
      ),
    ),
  );
}

random한 강아지 사진을 보여주는 현 시점까지의 앱:
random dog image