• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

provider 의 Consumer builder함수에서 반복문 사용 문제

20.03.30 22:50 작성 조회수 265

0

강사님 강의 잘 듣고 현재 간단한 프로젝트를 flutter로 만들고 있는데요.

저는 상태관리를 provider 방식으로 하고 있습니다.

궁금한점이 ListView에 게시글을 서버에서 받아서 복수개를 보여주는 로직인데요.

List<게시글 VO> 형식으로 Provider Model에 저장하고

Consumer 에서 반복문으로 게시글을 보여줍니다. 동작은 잘하는데 의문이

예를 들어

ListView에 200~300여개의 게시글을 보여준다고 하면  Consumer 내부에서 200~300회의 반복문이 수행되는데

그때 ListView에 보여지는 것이 문제가 없이 잘될까요?

일단 테스트로 ListView의 하단에 도달하면 2개씩 불러오는 코드에서는 잘 되는것 같습니다.

아니면 반복문 처리를 provider model 에서 미리 해놓고 Cosumner에서는 그대로 위젯 리스트를 리턴만 시키는게 좋을까요?

코드는 아래와 같습니다.

Consumer<RecruitModel>(
builder: (context,recruit,child){
List<Widget> resultList=[];
for(Recruit recruit in recruit.listInMain){
Widget recruitCard = _buildRecruitCard(
name:recruit.name,
regDate:recruit.regDate );
resultList.add(recruitCard);
}
return Column(
children: resultList,
);
},
)


class RecruitModel with ChangeNotifier{
var client = http.Client();
var listInMain=[];
var listInSearch=[];

void getListInMain({var start, var cnt}) async{
var requestUrl = clientUrl+'/rc_grlbc';
Uri uri = Uri.parse(requestUrl);
var urlWithParam = uri.replace(queryParameters: {
'start':start.toString(),
'cnt':cnt.toString()
});
try{
var response = await client.get(urlWithParam);
var list = jsonDecode(response.body);
var tempList=[];
for(int i=0;i<list.length;i++){
Recruit recruit = Recruit.fromJson(list[i]);
tempList.add(recruit);
}
listInMain..addAll(tempList);
}catch(e){
print('e : $e');
}
notifyListeners();
}
}

답변 1

답변을 작성해보세요.

0

반복문이 하는 동작이 UI를 만드는 동작이므로 RecruitModel 에서 하는 것은 아닌 것 같습니다. RecruitModel 에서는 지금처럼 로직만 수행하는 것이 맞습니다. 따라서 지금 하고 있는 코드가 특별히 문제가 있어 보이지는 않습니다.

다만 제가 경험한 바로는 플러터에서 많은 양의 아이템을 가진 ListView나 GridView의 경우 스크롤시 버벅거림 현상이 있었습니다.

지금 하신대로 Column 에서는 어떨지 모르겠네요.

코드 자체로는 큰 문제는 없어 보입니다.

참고로 다음과 같이 함수형 코드를 활용하면 코드를 좀 더 간결하게 하실 수도 있습니다.

Consumer<RecruitModel>(

  builder: (context,recruit,child){    

    return Column(

      children: recruit.listInMain.map((recruit) => _buildRecruitCard(

        name:recruit.name,

        regDate:recruit.regDate,

      )).toList(),

    );

  },

)