[Flutter ]ListView를 이용한 단어장 목록 만들기

이번엔 플러터에서 기본제공되는 위젯인 ListView를 이용하여 단어장 목록을 보여주는 페이지를 만들어 보자

 

ListView는 앱에서 데이터를 보여주기 위해 가장 많이 사용되는 위젯일 것이다.

 

먼저 오늘 만들 페이지 동작 화면이다.

단어장 목록이 0~99까지 100개가 나열되고 아래위로 스크롤 되는 너무나 익숙한 화면이다.

 

 

 

ListView를 구현하는 방법은 여러가지가 있을 수 있다.

코드 상에 목록을 나열할 수도 있고

목록을 파일로 만들고 그 파일을 읽어 들여 ListView를 완성할수도 있다.

또 네트워크를 통해 원격지 서버에서 데이터를 받아와 완성할 수 있다.  

 

네트워크를 통해 데이터를 가져와  ListView에 표현하는 가장 까다롭지만 가장 많이 사용된다고 볼 수 있다.

하지만 이번 시간에 코드안에 데이터를 포함하도록 할 것이다.

 

지루한 얘기는 미뤄두고 하나하나 따라해보자.

 

리스트뷰 아이템 모델 만들기

class Wordbook{
  String wordbookName;

  Wordbook(this.wordbookName);
}

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:wordtalk_black/model/Wordbook.dart';

class WordbookListPage extends StatefulWidget {
  WordbookListPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _WordbookListPage createState() => _WordbookListPage();
}

class _WordbookListPage extends State<WordbookListPage> {
  List<Wordbook> wordbooklList = <Wordbook>[];

  //가장 먼저 실행 되는 이벤트임.
  @override
  void initState() {
    super.initState();

    for (int i = 0; i < 100; i++) {
      wordbooklList.add(new Wordbook("단어장 $i"));
    }
  }

  //initState() 가 끝나면 실행됨.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(child: wordBookListView(context)),
    );
  }

  Widget wordBookListView(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: wordbooklList.length,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: Icon(Icons.library_books, color: Colors.red,),
          title: Text(wordbooklList[index].wordbookName),
        );
      },
    );
  }
}