[006] 플러터 (Flutter) 배우기 - ListView (리스트 만들기)

안녕하세요~ totally 개발자입니다.

 

ListView

 

오늘 다뤄볼 위젯은 ListView(리스트뷰)입니다. 이 ListView를 사용하면 가로 방향 혹은 세로 방향으로 여러 위젯들을 배치할 수 있습니다. 플러터에서 이 ListView는 GridView와 더불어서 많은 위젯들을 표시할 때 거의 필수적으로 사용되는 위젯이어서 반드시 알고 계셔야 합니다. 앞선 강의해서 보셨다시피 저희는 이미 Drawer 위젯에서 ListView 위젯으로 메뉴를 표시했습니다. 이것을 Scaffold 위젯의 child 즉 메인 부분에 배치하여 적용해보도록 하겠습니다. 보통 페이스북, 인스타그램 등 보시면 스크롤을 하여 포스트를 확인하는 것처럼 이번 시간에는 비슷하게 응용해 보겠습니다. 

 

 

ListView 활용

이제 여러 위젯이 중첩되어 살짝 복잡해지기 시작하였지만 원리는 간단합니다. 31번째 ListView 위젯을 작성하고 32번째 줄처럼 scrollDirection 속성을 넣어 가로 방향인지 혹은 세로 방향인지 명시해줍니다. Axis.horizontal은 가로 방향, Axis.vertical은 세로 방향이 됩니다. ListView 역시 여러 위젯을 담을 수 있기 때문에 children 속성을 사용하고 배열 형태로 지정합니다. 34번째부터 47번째 줄의 Container가 1개의 post 위젯이 됩니다. 다만 이 34번째부터 47번째의 container를 위처럼 반복해서 출력하다보면 코드가 너무 길어지는 단점이 있기 때문에 별도로 위젯을 분리해서 사용해보도록 하겠습니다.  

 

Extract Method

 

34번째 줄의 Container에서 Ctrl과 .을 누르고(맥은 커맨드 + .)  Extract Method을 선택합니다.

 

 

method 이름 입력

그러면 위에 메소드의 이름을 입력하라는 칸이 나오게 되는데 적절한 이름을 입력해줍니다. 저는 PostContainer로 명명했습니다. 

 

 

postContainer 메소드 생성

위에 보시는 것처럼 40번째 줄에 postContainer 메소드가 생성되고 34번째 줄은 postContainer(context)로 대체되었음을 확인할 수 있습니다. Title과 색상을 다르게 해주기 위해 parameter를 수정해보도록 하겠습니다. 

 

parameter 적용한 메소드 모습

위의 코드를 보면 40-41번째 라인의 postContainer 메소드에 중괄호 {}로 감싸서 parameter를 받을 수 있도록 적용했으며, 중괄호로 감싼 것과 단순 소괄호의 차이는 중괄호의 경우에 parameter 값이 전달되지 않을 때 기본값을 지정할 수 있고 메소드를 사용할 때 parameter의 key값을 적어주도록 되어 있습니다 하지만 만약 소괄호로 postContainer(String title, Color colorName) 이렇게 만들면 이 메소드를 사용할 때 postContainer("Title 1", Colors.amber) 이렇게 key 값 입력없이 바로 value값을 지정해주어야 합니다. 이 전달 받은 parameter 값들은 51번째 줄의 Text(title), 52번째의 color: colorName으로 지정해서 사용 가능합니다. 

 

 

postContainer 메소드 사용을 추가한 모습

2개 더 추가해본 모습입니다. 35번째에는 다른 제목, 다른 색상을 parameter 값으로 전달하였고 36번째에는 아무 것도 전달하지 않았습니다. 아무 것도 전달하지 않은 postContainer() 부분에서는 기본값으로 지정해두었던 Title과 검정색이 사용되었음을 확인할 수 있습니다. 그리고 이 부분의 아래 부분이 휴대폰의 세로 범위를 벗어나 일부만 보이는데 ListView 위젯은 기본적으로 스크롤이 가능하기 때문에 오류가 발생하지 않고 스크롤을 하면 나머지 부분을 확인할 수 있습니다.

 

[전체 소스 코드] 

 

[유튜브 영상 강좌]

 

https://youtu.be/PDOaxbdwAbQ

 

 

마치며...

 

오늘은 ListView와 메소드를 분리하는 방법, parameter 전달 방법 등 여러 가지를 복합적으로 진행해 보았습니다. 다음 시간에는 이 ListView를 더 효율적으로 사용할 수 있게 도와주는 ListView.builder에 관해서 살펴보도록 하겠습니다. 감사합니다.