Flutter 리스트 출력하기 (List.generate 사용법)

항상 어딘가를 가면 List가 존재한다. 피할 수도 없다

List를 만드는 방법은 하나씩 하나씩 넣으면 된다. 하지만, 누군가가 만든 List를 쓰고 싶을 때는 어떻게 해야 할까?

그렇다 받은 List만큼 반복해서 출력하면 된다

그때 List.generate를 사용하면 된다. 약간 gridView.builder도 반복문을 돌렸지만 약간 다르다. 구분 지어 나열하냐 안 하냐 차이인 듯하다

List.generate: 빠꾸 없이 밑으로 반복

gridView.builder: 옆으로 몇 개씩 나열하면서 밑으로 반복

이제 시작해 보도록 하겠다

 

1. 기본 코드

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';
import 'package:flutter_practice/sreen/index_screen1.dart';
import 'package:flutter_practice/sreen/index_screen2.dart';
import 'package:flutter_practice/sreen/index_screen3.dart';

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

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [],
      ),
    );
  }
}

 

List가 얼마나 있을지 모르니, 화면을 넘쳐흐르는 것을 방지하기 위해 ListView를 사용했다

 

 

2. List생성

일단 실습할 재료를 하나 생성하도록 한다. DB에서 받아 왔다고 생각하면 될 것이다

하지만 DB는 없는 관계로 코드를 하나 작성하자

List<String> list = [
    '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번 리스트 입니다. 감사합니다',
  ];

대충 이 정도 DB에서 받아 왔다고 가정하도록 한다. 그리고 우리는 리스트를 몇 개 인지도 모를 것이다

이렇게 재료를 준비해 놓도록 하자

 

3. List.generate

드디어 반복문을 돌리는 것을 사용하겠다

children: List.generate(
  list.length,
  (index) => Text(list[index]),
),

children에 [ ] ⇐ 이 대갈호를 지우고 List.generate를 넣어줬다. 그 이유는 List.generate가 List 타입이기 때문에 대체할 수 있는 것이다

generate에는 첫 번째 인수가 List의 개수를 뜻한다

두번째 인수는 index가 돌아갈 때 Widget이 리턴되면서 요소들을 만들어 주는 것이다 (이때를 반복문이라고 보면 될 듯하다)

 

4. 결과

짜잔

이렇게 결과가 잘 나왔다. 물론 ListView를 사용했기 때문에 얼마든지 List가 늘어나도 스크롤이 가능해지면서 밑에까지 다 볼 수 있을 것이다