리스트뷰(ListView) 사용법

https://eunoia3jy.tistory.com/101

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

내 앱에 핵심적으로 사용된 위젯은 리스트뷰이다.

아마 해당 위젯이 없었다면 앱 구현은 불가능하거나 매우 힘들었을지도...

중요했던 위젯인 만큼 해당 위젯에 대한 글을 추가로 써보자 한다.

 

body: ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: context.watch<SimpleState>().numb,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black))),
      height: 70,
      alignment: Alignment.centerLeft,
      child:Row(
          children: <Widget>[
            SizedBox(child: Text('  '+context.watch<SimpleState>().lt[index+1],
                style: TextStyle(fontSize: 22, fontFamily: 'ocf', height: 1)),width:150),
            SizedBox(child: Text('   '+'★'*int.parse(context.watch<SimpleState>().ls[index+1]),
                style: TextStyle(fontSize: 30, color:Colors.yellow, height: 1)),width:190),
            Align(
                alignment: Alignment.centerRight,
                child: IconButton(
                    icon: Icon(Icons.add_box_rounded),
                    color:Colors.black,
                    iconSize: 30,
                    onPressed: (){_showDialog(index+1);}
                    )
            )
          ]
      ),
    );
  }
),

내가 만든 앱의 리스트뷰 부분 코드

 

body: ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: context.watch<SimpleState>().numb,
  itemBuilder: (BuildContext context, int index) {

 

1.vertical은 세로로,  horizontal은 가로로 나열한다.

2.itemCount는 나열할 리스트의 개수.

나는 해당 개수를 number이란 SharedPreference 전역변수에 저장했고,

이를 context.watch().numb 메서드로 호출했다.

3.index는 해당 칸의 번호를 나타내는 변수로 밑에서 사용된다.

 

return Container(
  decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black))),
  height: 70,
  alignment: Alignment.centerLeft,
  child:Row(

리스트뷰로 나열할 위젯은 container이다.

왜냐하면 container의 decoration으로 경계선을 추가하기 위해서다.

높이와 중앙 정렬 등을 설정해주고,

container의 자식으로 row 위젯을 사용해 필요한 항목들을 가로로 나열해준다.

 

children: <Widget>[
  SizedBox(child: Text('  '+context.watch<SimpleState>().lt[index+1],
      style: TextStyle(fontSize: 22, fontFamily: 'ocf', height: 1)),width:150),
  SizedBox(child: Text('   '+'★'*int.parse(context.watch<SimpleState>().ls[index+1]),
      style: TextStyle(fontSize: 30, color:Colors.yellow, height: 1)),width:190),
  Align(
      alignment: Alignment.centerRight,
      child: IconButton(
          icon: Icon(Icons.add_box_rounded),
          color:Colors.black,
          iconSize: 30,
          onPressed: (){_showDialog(index+1);}
          )
  )
]

row엔 3개의 항목이 들어가는데,

내가 별점을 매긴 대상의 이름, 별점 그리고 +버튼이다.

이름과 별점은 sizedbox로 크기를 지정하고 안에 text를 넣었다.

그리고 align의 child로 아이콘버튼을 추가했다.

해당 +버튼을 누르면 대상의 한줄평과 삭제버튼이 뜨는 showdialog 메소드를 호출한다.

 

나의 경우 별점을 매긴 대상'들'의 이름, 별점, 한줄평을

3개의 string 리스트에 각각 저장하였는데,

1번 대상의 정보는 3개의 리스트의 각 1번칸에,

2번 대상의 정보는 각 2번칸, 이런식이다.

여기서 해당 대상의 번호는 위에서 지정한 index 변수를 통해 접근한다.