위젯에 대한 기능_4

ListView 위젯 : 스크롤이 가능한 List를 만들기 위한 ListView위젯에 대한 예제는 다음과 같다.

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[0],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[100],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[200],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[300],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[400],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[0],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[100],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[200],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[300],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[400],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[0],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[100],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[200],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[300],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[400],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[0],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[100],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[200],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[300],
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.amber[400],
            ),
          ],
        ),
      ),
    );
  }
}

반복되는 구문이기에 이는 ListView.builder를 사용하면 다음과 같이 간결하게 나타낼 수 있다.

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView.builder(
          itemCount: 100, // 전체 아이템 개수
          itemBuilder: (context, index) {
            // index는 0 ~ 99까지 증가하며 itemCount만큼 호출됩니다.

            print(index % 5); // index를 5로 나눈 나머지

            // 위젯을 반환해야 합니다.
            return Container(
              height: 100,
              width: 100,
              color: Colors.amber[100 * (index % 5)],
              child: Text(
                "$index",
                style: TextStyle(
                  fontSize: 24,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}