[Flutter] Listview 위젯 사용하기

안녕하세요 골드입니다.

오늘은 Flutter에서 Listview를 사용하는 방법에 대해서

글을 작성하도록 하겠습니다.

 

저는 작성한 리스트를 리스트뷰로 보여주도록 하겠습니다.

 

1. List 생성

먼저 material design을 위한 패키지를 import합니다.

앞으로 자주 import할 녀석입니다.

material design을 사용하도록 도와줍니다.

다음으로 main 함수를 작성합니다.

flutter의 main 함수입니다. 앱을 실행하면 가장 먼저 실행되는 함수입니다.

람다식으로 표현되어 있고 runApp() 안에 들어있는 메서드를 실행합니다.

 

두 가지 변수를 선언했습니다. 하나는 String 변수로 title을 지정하기 위해 선언했습니다.

다른 하나는 List<String> 형식의 변수입니다. dart에서 List를 선언할 때 [] 대괄호를 사용합니다.

const라는 키워드는 한 번 선언하면 다른 값으로 변경할 수 없음을 의미합니다.

_(언더바)는 private을 의미합니다.

 

ListViewDemo라는 클래스는 StatelessWidget을 상속받고 있습니다.

StatelessWidget을 상속받은 위젯은 state를 변경할 필요가 없다는 것을 의미합니다.

예를 들면 title같은 것이 있습니다. 

앱을 사용하는 동안 그 앱의 title같은 경우는 바뀌거나 할 필요가 없습니다.

이런 위젯들은 StatelessWidget을 상속받습니다.

이와 반대로 StatefulWidget class가 있습니다.

 

2. ListView builder 객체 생성

메서드를 하나 작성합니다.

이 메서드는 리스트뷰의 리스트들을 위한 메서드입니다.

 

builder 객체를 생성합니다.

builder는 하나의 디자인 패턴입니다.

메서드를 하나 만들었습니다. 반환값은 Widget입니다.

itemCount는 리스트의 개수입니다. 적절한 값을 선언하는 것이 좋습니다.

그렇지 않으면 오류가 발생합니다.

itemBuilder는 리스트뷰에서 하나의 리스트 위젯을 다루기 위함입니다.

BuildContext를 통해 StatelessWidget.build 메서드를 사용함으로써 화면에 나타나게 됩니다.

i는 index 값입니다.

 

itemBuilder 안에서 ListTile을 리턴합니다.

ListTile은 제목을 나타내는 title 속성과,

설명을 의미하는 trailing 속성을 가지고 있습니다.

  title 속성에 Text를 하나 추가했습니다. 값은 작성한 _data 리스트가 들어가고

TextStyle을 추가했습니다.

  trailing 속성에 아이콘을 하나 추가했습니다. 

 

경우에 따라서 여러분의 리스트는 다른 위젯을 사용하여

리스트를 custom할 수 있습니다.

예를 들면 Column이나 Row 위젯을 사용할 수 있습니다.

 

3. build 메서드 오버라이드

반드시 오버라이드해야 하는 메서드가 build 메서드입니다.

그렇지 않으면 StatelessWidget을 상속받았을 때 오류가 납니다.

 

여기서 사용한 MaterialApp과 Scaffold는 거의 공식처럼 사용됩니다.

MaterialApp은 material design을 따르겠다는 위젯(익숙한 의미로는 레이아웃)입니다.

가장 큰 역할은 화면 이동이나 테마 지정을 들 수 있습니다.

Scaffold 역시 마찬가지로 material design을 위한 API를 사용하기 위한 위젯입니다.

Scaffold는 앱을 더 쉽게 만들 수 있도록 도와줍니다.

Snackbar, bottom sheet, drawers 등을 사용할 수 있도록 도와줍니다.

 

만약 이 두가지를 사용하지 않는다면 앱 위젯을 밑바닥부터 여러분이 작성해야 합니다.

 

home 속성은 앱의 route(한 화면)의 기본 위젯을 나타냅니다.

앱이 시작되었을 때 처음 display되는 화면에 보이는 위젯입니다.

appbar 속성은 말 그대로 appbar를 나타냅니다.

body 속성은 쉽게 이야기하면 appbar 밑에 나타나는 위젯입니다.

여기서 앞서 작성한 메서드를 작성합니다.

 

실행해보겠습니다.

리스트뷰가 완성된 모습을 볼 수 있습니다.

 

여기까지 골드였습니다.

감사합니다.

 

참고자료 : 처음 배우는 플러터

https://api.flutter.dev/index.html

Flutter - Dart API docs