리스트뷰(ListView) 기본 사용법

1. ListView란?
   • 스크롤 가능한 리스트를 만드는 데 사용하는 위젯입니다.
   • 동적인 목록 또는 긴 데이터를 표시하는데 유용합니다.

2. 기본 ListIvew

• 예제

ListView(
  children: [
    ListTile(title: Text('항목 1')),
    ListTile(title: Text('항목 2')),
    ListTile(title: Text('항목 3')),
  ],
)

3. ListView.builder

• 항목이 많거나 동적으로 생성할 때 사용합니다.

• 예제

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.list),
      title: Text('리스트 아이템 #$index'),
    );
  },
)

4. 수평 스크롤 ListView

• 예제

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(width: 100, color: Colors.red),
    Container(width: 100, color: Colors.blue),
    Container(width: 100, color: Colors.green),
  ],
)

5. 따라 하기 미션

• ListViwe.builder를 사용해 1부터 20까지 숫자를 표시하는 리스트를 만들어보세요.
• 수평 스크롤 ListView를 직접 디자인해보세요.

• 예제 코드:

import 'package:flutter/material.dart';

// 앱 시작점
void main() {
  runApp(MyApp());
}

// StatelessWidget으로 기본 UI 구성
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView 실습 예제')),
        body: Column(
          children: [
            // 수직 ListView.builder 예제
            Expanded(
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Icon(Icons.format_list_numbered),
                    title: Text('숫자 ${index + 1}'),
                  );
                },
              ),
            ),
            SizedBox(height: 20),

            // 수평 스크롤 ListView 예제
            Container(
              height: 100,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Container(
                    width: 80,
                    margin: EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Center(
                      child: Text(
                        '${index + 1}',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

다음 튜토리얼에서는 앱에 이미지 추가하고 크기 조절하는 법을 알아보겠습니다.