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

단어장 목록에서 단어장을 탭하면 해당 단어장 이름을 보여주는 코드를 작성해보자

 

 

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(wordbookName: "단어장 $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),
          //단어장을 탭하
          onTap: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) =>
                        //단어 목록을 보여줄 페이지에 단어장 정보를 넘겨준다.
                        WordListPage(wordbook: wordbooklList[index])));
          },
        );
      },
    );
  }
}

//단어 목록을 보여줄 페이지
class WordListPage extends StatelessWidget {
  /**
   * 넘겨받은 단어
   */
  final Wordbook wordbook;

  //단어장 정보를
  WordListPage({Key? key, required this.wordbook}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(wordbook.wordbookName),
      ),
      body: Padding(
          padding: EdgeInsets.all(16.0),
          //단어장 이름을 화면 중앙데 폰트사이즈 40으로 보여준다.
          child: Center(
            child: Text(
              wordbook.wordbookName,
              style: TextStyle(fontSize: 40),
            ),
          )),
    );
  }
}