[Flutter] 리스트뷰(ListView) 사용하기

 

안녕하세욧!

Flutter에서 리스트뷰(ListView) 를 만드는 방법이예용 😁

 

예전에 안드로이드 java 소스로 리스트뷰(ListView) 를 만들기를 포스팅한적 있는데요~

https://eunoia3jy.tistory.com/13?category=1011678 

[안드로이드/Android] 리스트뷰(ListView) 만들기

이번에는 Flutter 로 리스트뷰(ListView) 를 만들어 보려고 합니다~

 

 

 

1. ListviewPage.dart

 

ListviewPage.dart 파일을 만들어서 리스트뷰(ListView) 화면을 구현해 볼게요~

LIstView 를 사용하는 방법은 ListView.builder 와 ListView.separated 가 있습니다.

 

 

ListView.builder 사용 - 기본형

 

리스트뷰(ListView) 의 기본형인 ListView.builder 를 사용한 소스코드 입니다.

LIstView.builder (
   scrollDirection: Axis.horizontal, //vertical : 수직으로 나열 / horizontal : 수평으로 나열
   itemCount:   //리스트의 개수
   itemBuilder: (BuildContext context, int index) { ... }  //리스트의 반목문 항목 형성
),

이런 형태를 사용합니다.

import 'package:flutter/material.dart';

class ListviewPage extends StatefulWidget {
  const ListviewPage({
    Key? key,
  }) : super(key: key);

  @override
  _ListviewPageState createState() => _ListviewPageState();
}

class _ListviewPageState extends State<ListviewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListviewPage'),
      ),
      body: ListView.builder(
          scrollDirection:
              Axis.vertical, //vertical : 수직으로 나열 / horizontal : 수평으로 나열
          itemCount: 7, //리스트의 개수
          itemBuilder: (BuildContext context, int index) {
            //리스트의 반목문 항목 형성
            return Container(
              height: 70,
              color: Colors.green[index * 200],
              alignment: Alignment.center,
              child: Text('item : $index'),
            );
          }),
    );
  }
}

ListView.builder 를 사용한 Axis.vertical 리스트

ListView.builder 를 사용한 Axis.horizontal 리스트

 

 

ListView.separated 사용 - 구분

 

리스트뷰(ListView) 사이사이에 구분선이나 Padding 등의 위젯을 추가해 줄 수 있는 ListView.separated 를 사용한 소스코드 입니다.

LIstView.separated (
   scrollDirection: Axis.horizontal, //vertical : 수직으로 나열 / horizontal : 수평으로 나열
   separatorBuilder: (BuildContext context, int index) { ... },  //separatorBuilder : item과 item 사이에 그려질 위젯 (개수는 itemCount -1 이 된다)
   itemCount:   //리스트의 개수
   itemBuilder: (BuildContext context, int index) { ... }   //리스트의 반목문 항목 형성
),

이 형태를 사용합니다.

저는 Divider() 위젯을 통해 구분선을 추가해주었어요.

import 'package:flutter/material.dart';

class ListviewPage extends StatefulWidget {
  const ListviewPage({
    Key? key,
  }) : super(key: key);

  @override
  _ListviewPageState createState() => _ListviewPageState();
}

class _ListviewPageState extends State<ListviewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListviewPage'),
      ),
      body: ListView.separated(
          scrollDirection:
              Axis.vertical, //vertical : 수직으로 나열 / horizontal : 수평으로 나열
          separatorBuilder: (BuildContext context, int index) => const Divider(
                color: Colors.black,
              ), //separatorBuilder : item과 item 사이에 그려질 위젯 (개수는 itemCount -1 이 된다)
          itemCount: 7, //리스트의 개수
          itemBuilder: (BuildContext context, int index) {
            //리스트의 반목문 항목 형성
            return Container(
              height: 70,
              color: Colors.pink[index * 100],
              alignment: Alignment.center,
              child: Text('item : $index'),
            );
          }),
    );
  }
}

 

 

이미지를 추가하여 더 더 정교한 리스트뷰를 만드는 방법은 다음 포스팅에서 진행해보겠습니다~

감사합니당 😊