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

 

안녕하세요~ 기본 리스트뷰(ListView) 사용하기 에 이어서 

리스트뷰(ListView) 의 하나의 item 리스트에 순번, 이미지, 이름 텍스트 를 표출하도록 하였습니다.

 

기본 리스트뷰(ListView) 사용하기 먼저 확인해주세요~

https://eunoia3jy.tistory.com/101

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

 

 

Image 위젯 을 사용하는 방법은 아래 게시물을 확인해주세요~

https://eunoia3jy.tistory.com/102

[Flutter] 이미지 Image 추가 & 등록 & Image 위젯 사용하기

 

 

그리고 이름 텍스트는 아래의 JSON 직렬화 를 통해 만든 모델 클래스 를 이용해서 데이터를 가지고와 사용하였습니다.

https://eunoia3jy.tistory.com/103

[Flutter] 모델 클래스 내에서 코드 생성 라이브러리를 사용한 JSON 직렬화

 

원래 통신은 Future 을 사용하여 json 데이터를 받아와야 하는데, 저는 JSON 형태의 bearItem 을 하드코딩하였기 때문에 build() 메소드 시작 시 JSON 직렬화를 이용한 fromJson() 을 사용하여 데이터를 사용하였습니다~!

 

 

ListView 의 itemBuilder 안에 Row 위젯을 사용하여 하나의 item 리스트에 여러개의 위젯을 표출하도록 하였습니다.

import 'package:flutter/material.dart';
import 'package:flutter_application_1/model/BearItem.dart';

final bearItem = {
  "list": [
    {"image": "assets/images/img_blue.png", "name": "파랑이"},
    {"image": "assets/images/img_mint.png", "name": "민트트"},
    {"image": "assets/images/img_skyblue.png", "name": "하늘이"},
    {"image": "assets/images/img_white.png", "name": "하양이"},
    {"image": "assets/images/img_pink.png", "name": "분홍이"},
    {"image": "assets/images/img_yellow.png", "name": "노랑이"},
    {"image": "assets/images/img_purple.png", "name": "보라라"},
    {"image": "assets/images/img_mix.png", "name": "믹스스"}
  ]
};
BearList? bearList;

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

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

class _ListviewPageState extends State<ListviewPage> {
  @override
  Widget build(BuildContext context) {
  
    bearList = BearList.fromJson(bearItem);  //JSON 직렬화를 이용한 fromJson 사용
    
    return new MaterialApp(
      // 구글 기본 디자인인 Material Design을 써서 앱을 만든다.
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListViewPage'),
        ),
        body: ListView.separated(
          scrollDirection: Axis.vertical,
          separatorBuilder: (BuildContext context, int index) =>
              const Divider(), //separatorBuilder : item과 item 사이에 그려질 위젯 (개수는 itemCount -1 이 된다)
          itemCount: bearList!.list!.length, //리스트의 개수
          itemBuilder: (BuildContext context, int index) {
            //리스트의 반목문 항목 형성
            return Container(
              height: 80,
              color: Colors.pink[index * 100],
              child: Row(
                children: [
                  Container(
                    width: 50,
                    alignment: Alignment.center,
                    // color: Colors.yellow,
                    child: Text(
                      '$index',
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                  ),
                  Image.asset(
                    bearList!.list!.elementAt(index).image!,
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        bearList!.list!.elementAt(index).name!,
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

 

 

 

결과 화면

 

 

 

감사합니당 ^-^