22. 플러터 : 목록 보기 (리스트뷰 기본)

우재야.. 이제 플러터의 끝이 다가오고 있다.
아빠가 기본적인 내용을 열심히 만들기는 했는데
여기에 살을 붙여서 응용하는 것은 많이 힘들거야.
근데.. 그건 아빠가 해줄 수가 없어.
인생이란 늘 한결 같아서 고생하지 않으면 가질 수가 없었어.
마지막까지.. 파이팅!!

항목이 3개 있는 리스트뷰 위젯을 만들었다.
왼쪽은 처음 화면, 오른쪽은 '사진' 항목을 눌러서 경고창이 떴을 때의 화면.
내용이 별거 없는 만큼 리스트뷰가 동작하는 방식을 잘 보여줄 수 있게 만들었어.

ListView 클래스를 만드는 방법에는 여러 가지가 있지만
가장 쉬운 방법은 그냥 기본 생성자를 통해 만드는 거야.
리스트뷰 위젯 만들고 그 안에 필요한 만큼 리스트 항목, 여기서는 ListTile 클래스가 되지.

이번 코드에서는 개수가 많지 않기 때문에 코드가 선명하게 보이는 거고
다음 예제에서 항목의 개수를 늘려서 여러 페이지에 나타나도록 해 볼거야.

ListTile 클래스에서 가장 중요한 것은 onTap 매개변수.
나를 눌렀으니까 그에 따른 뭔가를 해야겠지.
여기서는 간단하게 항목별로 다른 문자열을 출력하고 있어.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('목록 보기')),
            body: ListView(                             // 1. 리스트뷰 생성하고
                children: <Widget>[
                    ListTile(                           // 2. 리스트 항목 추가하면 끝!
                        leading: Icon(Icons.map),
                        title: Text('지도'),
                        onTap: () => _showDialog(context, '지도'),
                    ),
                    ListTile(
                        leading: Icon(Icons.photo),
                        title: Text('사진'),
                        onTap: () => _showDialog(context, '사진'),
                    ),
                    ListTile(
                        leading: Icon(Icons.phone),
                        title: Text('전화'),
                        enabled: false,                             // 비활성
                        onTap: () => _showDialog(context, '전화'),
                    ),
                ],
            ),
        );
    }

    // API에 있는 showDialog 함수와 이름이 같아서 밑줄(_) 접두사(private 함수)
    void _showDialog(BuildContext context, String text) {
        // 경고창을 보여주는 가장 흔한 방법.
        showDialog(
            context: context,
            builder: (BuildContext ctx) {
                return AlertDialog(
                    title: Text('선택 완료!'),
                    content: Text('$text 항목을 선택했습니다.'),
                    // 주석으로 막아놓은 actions 매개변수도 확인해 볼 것.
                    // actions: <Widget>[
                    //     FlatButton(child: Text('확인'), onPressed: () => Navigator.pop(context)),
                    // ],
                );
            }
        );
    }
}

showDialog 함수는 경고창을 표시하는 AlertDialog 위젯을 비롯해서
여러 가지 형태의 대화상자를 보여주는 가장 쉬운 방법이야.
showDialog 함수를 통하지 않으면 화면에 아무 것도 표시되지 않아.