[Flutter] Widget - ListTile

1. ListTile이란?

ListTile Widget은 높이가 고정된 단일 행을 제공하는 Widget입니다.

내용으로 다른 Widget이나 Icon 등을 넣을 수 있습니다.

2. ListTile 생성자 및 속성

https://api.flutter.dev/flutter/material/ListTile-class.html

ListTile class - material library - Dart API

Flutter Material API 가이드를 통해 ListTile Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

○ 생성자(Constructor)

<ListTile 생성자>

 

○ 속성(Property)

1) title

<title 속성>

- 매개변수 타입 : Widget

- 역할 : 제목란

 

2) subtitle

<subtitle 속성>

- 매개변수 타입 : Widget

- 역할 : 본문란

 

3) tileColor

<tileColor 속성>

- 매개변수 타입 : Color

- 역할 : ListTile Widget 배경 색상 지정

 

4) leading

<leading 속성>

- 매개변수 타입 : Widget

- 역할 : 제목과 본문 좌측에 설정한 Widget 표시

 

5) trailing

<trailing 속성>

- 매개변수 타입 : Widget

- 역할 : 제목과 본문 우측에 설정한 Widget 표시

3. ListTile 예제 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ListTile Widget')),
        body: onTapPage(),
      ),
    );
  }
}

class onTapPage extends StatefulWidget {
  @override
  _onTapPageState createState() => _onTapPageState();
}

class _onTapPageState extends State<onTapPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        buildCard('0xf051c', 'HTML', 'Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.'),
        buildCard('0xf0525', 'Javascript', 'an object-oriented computer programming language commonly used to create interactive effects within web browsers.'),
        buildCard('0xf04db', 'CSS', 'Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML).'),
        buildCard('0xf0549', 'PHP', 'PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.'),
      ],
    );
  }

  Card buildCard(icon, title, subtitle) {
    return Card(
      child: ListTile(
        leading: Icon(
          IconData(
            int.parse(
              icon,
            ),
            fontFamily: 'MaterialIcons',
          ),
        ),
        title: Text(title),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.more_vert),
        tileColor: Colors.grey[300],
        onTap: () {
          setState(() {
            AlertDialog alert = AlertDialog(
              title: Text(title),
            );
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return alert;
              },
            );
          });
        },
      ),
    );
  }
}

예제 코드의 의미는 다음과 같습니다.

• StatelessWidget을 상속받은 MyApp Widget(사용자 생성 Widget) 불러오기
  • build 메소드를 통해 MaterialApp Widget을 반환
    • Scaffold Widget으로 메인화면 구현
      • 'ListTile Widget'이라는 문자열을 상단 메뉴의 제목으료 표시
      • 본문에서는 StatefulWidget을 상속받은 onTapPage Widget(사용자 생성 Widget) 불러오기
        • creatState 메소드를 통해 _onTapPageState(사용자 생성 Widget)를 반환
        • (StatefulWidget을 상속받은 Widget은 createState 메소드를 override하여, State를 상속받은 Widget을 반환해야 함)
          • _onTapPageState Widget은 build 메소드를 통해 ListView Widget을 반환
            • children 속성을 통해 다수의 하위 Widget 생성
              • 3개의 매개변수를 받고 Card Widget을 반환하는 buildcard Widget(사용자 생성 Widget) 사용
              • (첫 번째 매개변수는 icon 코드번호)
              • (두 번째 매개변수는 title 문자열)
              • (세 번째 매개변수는 subtitle 문자열)
                • Card Widget에서 하위 Widget으로 ListTile Widget 반환
                  • 입력받은 icon 코드번호를 통해 ListTile의 좌측 이미지 구현
                  • 입력받은 title 문자열을 통해 ListTile의 제목 표시
                  • 입력받은 subtitle 문자열 통해 ListTile의 본문 표시
                  • 'more_vert'라는 Icon으로 ListTile의 우측 이미지 구현
                  • 회색으로 ListTile 배경색 설정
                  • onTap 속성을 통해 State 설정
                    • title 문자열을 알람 내용으로 설정
                    • 알람창 표시

4. ListTile 실행 결과

 

<실행 화면>

<'HTML' ListTile 클릭 후 화면>