플러터로 텍스트를 목록으로 표시하고 탭하면 지정한 작동을 하도록 하는 위젯이 꽤 됩니다. 그중에서 간편하게 쓸 수 있는 것이 ListTile 입니다. ListTile은 해시맵과 같은 유형으로 읽어들인 구조적인 데이터의 구조를 입력받아 각 타일을 채워넣는 것이 자동화됩니다. 아래처럼 할 수 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
final Map<String, dynamic> data1 = { "0000": { "uid": "0000", "content": "컨텐츠 0000", "title": "제목 0000" "category": "카테고리 0000", "thumbnail": "assets/images/thumbnail1.jpg", }, "0001": { "uid": "0001", "content": "컨텐츠 0001", "title": "제목 0001", "category": "카테고리 0001", "thumbnail": "assets/images/thumbnail2.jpg", }, "0002": { "uid": "0002", "content": "컨텐츠 0002", "title": "제목 0002", "category": "카테고리 0002", "thumbnail": "assets/images/thumbnail3.jpg", }, ... }; |
이렇게 저장된 데이터를 리스트로 만들어 저장하고 이 값을 map() 으로 받아와서 처리할 수 있습니다. 이 경우 Row()나 Column()의 children: [ ] 속성에 기재하면 여러개의 ListTile이 자동으로 만들어집니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@override Widget build(BuildContext context) { List dataList1 = data1.values.toList(); return Column( children: dataList1 .map<Widget>( (e) => ListTile( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => ArticleDisplayPage(e['content']))); }, title: Text(e['title']), subtitle: Text(e['category'], ), ) .toList(), ); } |
위와 같이 하면 map((e) => ListTile() 이 가능해집니다. 여기에 주어진 e 변수는 연관 배열처럼 쓸 수 있습니다. 목록이 자동으로 완성됩니다.
그런데 가끔 목록에 이미지를 추가하고 싶어질 때가 있습니다. 이미지를 추가하려고 하면 ListTile의 경우 leading: 이나 trailing: 속성에 둡니다. 그런데 이 속성에 이미지를 배치하면 좌측이나 우측에 배치되고 위로는 안되서 방법을 찾는데 잘 안찾아지네요. 스택오버플로우처럼 경험 많고 상세하게 답변이 오가는 사이트에서도 뾰족한 답변을 안해줍니다.
구글 공식 API 문서를 살펴보니, ListTile의 title: 속성과 subtitle: 속성은 Widget을 넘겨받는 속성이라, Text외에도 Image.asset()을 넘겨도 되겠다는 생각이 들었습니다. 아니나 다를까, 해보니 됩니다. 위 예제 구조를 그대로 받는다면, title: 에 이미지를 배치하고 subtitle: 에 글의 메타데이터를 배치하는 방법이 가능해집니다.
구체적으로 아래처럼 하면 됩니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@override Widget build(BuildContext context) { List dataList1 = data1.values.toList(); return Column( children: dataList1 .map<Widget>( (e) => ListTile( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => ArticleDisplayPage(e['content']))); }, title: thumbnail(context, e['thumbnail']), subtitle: metainfo(e['title'], e['category']), ), ) .toList(), ); } |
웹검색만으로는 방법이 잘 안찾아지는데 실력이 늘으니 구글 공식 API 문서 읽다가 힌트를 얻네요.
참고로 thumbnail() 함수는 Image.asset을 포함하는 위젯 모음을 리턴하구요. metainfo() 함수는 제목과 카테고리를 처리하는 Column() 위젯에 Text() 위젯을 집어넣어 리턴합니다. 한마디로 말해 title: 속성에 Image.asset()을 포함하는 처리를 할 수 있다는 것입니다.
위의 코드는 dataList1에 map() => ListTile을 달아 쓰기에 ListTile 안에서만 작동하게 해야 e 변수를 쓸 수 있습니다. 그래서 뭔가 신박한 코드구조를 개발할 수 있을지 모르지만, ListTile이 제공하는 속성을 최대한 이용해야 합니다. 달리 말해 특정 위젯 구조를 무조건 써야할때, 어느 속성에 어느 위젯을 배치할지, 살펴보려면 구글 공식 API 문서를 잘 보면 힌트가 얻어집니다. 위의 예에서는 Text 대신에 Image.asset을 배치하는 힌트를 얻으려고 찾아보았구요. 타위젯도 흡사한게 가능한지는 구글 공식 API 문서에서 찾아보면 됩니다. 각 API 클래스 해설 페이지에서 Properties를 잘 보면 됩니다. Properties를 잘 보면 가능한 속성과 어떤 타입인지 잘 나옵니다.
위에서 언급안한게 있는데요. thumbnail() 함수와 metainfo() 함수는 플러터나 다트에 내장된 함수가 아니라 제가 필요에 따라 만든 것입니다. Image.asset()을 직접 두어도 됩니다.