Flutter 강좌 - [List] ListView 기본 사용법

Development/Flutter

Flutter 강좌 - [List] ListView 기본 사용법

독행소년 2019. 7. 4. 14:23

Flutter 강좌 목록 : https://here4you.tistory.com/120

이번 강좌에서는 ListView를 사용하는 방법에 대해서 알아본다.

Flutter에서의 ListView는 ListTile들로 구성된다.

소스코드는 다음과 같다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: ListView(
          children: <Widget>[
            ListTile(
              //leading. 타일 앞에 표시되는 위젯. 참고로 타일 뒤에는 trailing 위젯으로 사용 가능
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            )
          ],
        ),
      ),
    );
  }
}

Scaffold의 body에 ListView를 등록하고 있다. 그리고 ListView는 3개의 ListTile을 가진다.

ListTile의 leading은 타일의 앞부분을 구성할 때 사용하고, 타일의 뒷부분을 구성하고자 할 때에는 trailing을 이용하면 된다. 그리고 타일의 주요 내용은 title 항목에서 꾸밀 수 있다.

실행화면은 다음과 같다.