[Flutter] BoilerTemplate 리스트 뷰 개념

많이 쓰는 조합이다.

서버를 호출해서 데이터를 가져온다.

가져와서 리스트뷰로 아이템 세팅해서 뿌려준다.

대부분 이미지 + 텍스트 의 데이터를 기반으로 세팅하기에 해당 조건으로 템플릿을 생성한다.

우선 디렉토리를 위의 구조로 간다.

data를 받아오는 곳은 해당 폴더에서 처리를 한다.

우선 해당 파일에서 리스트를 return 한다.

 

List posts = List.generate(
    13,
    (index) => {
          "name": names[random.nextInt(10)],
          "dp": "assets/images/cm${random.nextInt(10)}.jpeg",
          "time": "${random.nextInt(50)} min ago",
          "img": "assets/images/cm${random.nextInt(10)}.jpeg"
        });

import 'package:flutter/material.dart';

class PostItem extends StatefulWidget {
  final String dp;
  final String name;
  final String time;
  //final String img;

  PostItem({
    super.key,
    required this.dp,
    required this.name,
    required this.time,
    //required this.img,
  });

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

class _PostItemState extends State<PostItem> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 5),
      child: InkWell(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(
                backgroundImage: AssetImage(
                  "${widget.dp}",
                ),
              ),
              contentPadding: EdgeInsets.all(0),
              title: Text(
                "${widget.name}",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              trailing: Text(
                "${widget.time}",
                style: TextStyle(
                  fontWeight: FontWeight.w300,
                  fontSize: 11,
                ),
              ),
            ),
            // Image.asset(
            //   "${widget.img}",
            //   height: 170,
            //   width: MediaQuery.of(context).size.width,
            //   fit: BoxFit.cover,
            // ),
          ],
        ),
        onTap: () {},
      ),
    );
  }
}

 

그 다음에 post 에 대한 아이템을 세팅하는 부분은 위와 같다.

PostItem에 대한 생성자로 파라미터를 받는다.

그리고, 해당 StatfulWidget에서는 State로, ListTile을 리턴해준다.

그리고 ListViewBuilder는 아래와 같다.

body: ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 20),
        itemCount: posts.length,
        itemBuilder: (BuildContext context, int index) {
          Map post = posts[index];
          return PostItem(
            //img: post['img'],
            name: post['name'],
            dp: post['dp'],
            time: post['time'],
          );
        },
      ),

아까 PostItem을 리턴하게 되면, 해당 ListTile dnㅣ젯들이 리턴되게 되고, 이는 itemBuilder의 값에 들어가게 된다.

 

일단 기본적인 소스 골격은 짰고, assets 기반이 아닌, S3 모듈을 살펴보자