[Flutter] ListView 사용법과 주요 property

• 가장 일반적으로 사용되는 스크롤 위젯
• ListView는 주로 다음과 같은 방식으로 사용
  • 일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 (적은 데이터에 사용시 용이함)
  • ListView.builder를 사용하여 동적으로 호출
  • ListView.separated는 ListView.builder 기능에 구분선 사용 가능
• 주요 property
  • reverse: true이면 bottom에서부터 리스트 표시
  • padding: 리스트 아이템 간격 (EdgeInsets로 적용)
  • itemCount: 동적 리스트 아이템 개수 (ListView.builder/ListView.separated에서 사용 가능)
  • itemBuilder: 각 동적 리스트 아이템 정의 (ListView.builder/ListView.separated에서 사용 가능)
  • physics: 스크롤 방식 설정

 

ListTile

• Material Design의 리스트 스타일 따르는 위젯
• ListView와 함께 사용하여, 일반적인 스크롤을 지원하는 리스트 메뉴를 표현

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          padding: EdgeInsets.all(10),
          children: [
            // ListTile --> 리스트를 시각적으로 구성 
            ListTile(
              // 왼쪽 // CircleAvatar --> 동그란 아이콘
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text('1'),
              ),
              // 제목
              title: Text('Item1'),
              // 부제목
              subtitle: Text('Item description'),
              // 오른쪽 아이콘
              trailing: IconButton(
                icon: Icon(Icons.more_vert),
                onPressed: () {
                  print('click');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

ListView.builder 사용 해보기

import 'package:flutter/material.dart';

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

class MyApp11 extends StatelessWidget {
  const MyApp11({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // ListView 안에 스크롤 뷰가 들어가 있다.
        body: ListView.builder(
          physics: ClampingScrollPhysics(), // 스클로 동작을 정의
          itemCount: 20, // 20개 항목이 생성됨 (리스트의 길이)
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text(index.toString()),
              ),
              title: Text('Item $index'),
              subtitle: Text('sub Item $index'),
            );
          },
        ),
      ),
    );
  }
}

 

ListView.separated 사용 해보기

import 'package:flutter/material.dart';

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

class MyApp12 extends StatelessWidget {
  const MyApp12({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // 리스트 항목 사이에 구분자
        body: ListView.separated(
          physics: ClampingScrollPhysics(), // 스클로 동작을 정의
          itemCount: 20, // 20개 항목이 생성됨 (리스트의 길이)
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text(index.toString()),
              ),
              title: Text('Item $index'),
              subtitle: Text('sub Item $index'),
            );
          },
          separatorBuilder: (context, index){
            return const Divider(
              indent: 20.0,
              endIndent: 20.0,
            );
          },
        ),
      ),
    );
  }
}