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

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 항목에서 꾸밀 수 있다.

 

실행화면은 다음과 같다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱