오류
[플러터] ListTile과 GestureDetector
JungMayo
2025. 1. 21. 18:15
// chat_match.dart
import 'package:flutter/material.dart';
class ChatMatch extends StatelessWidget {
const ChatMatch({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
'새 매치',
style: TextStyle(
fontSize: 12, // 크기 수정해야됨
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 8),
SizedBox(
height: 150,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5, // index 받아와서 넣어줘야함
itemBuilder: (context, index) {
return NewMatchItem(
imageUrl: 'https://picsum.photos/250/250', // 실제 이미지 URL
name: 'ㅇㄱㅇ', // 실제 이름
connection: true,
onTap: () {
print('클릭했음');
// 매치 클릭 처리 -> 클릭했을 때 채팅방으로 이동
},
);
},
),
),
],
);
}
}
class NewMatchItem extends StatelessWidget {
final String imageUrl;
final String name;
final bool connection;
final VoidCallback onTap;
const NewMatchItem({
Key? key,
required this.imageUrl,
required this.name,
this.connection = false,
required this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
width: 80,
margin: EdgeInsets.symmetric(horizontal: 4),
child: Column(
children: [
Stack(
children: [
Container(
width: 80,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
),
),
if (connection)
Positioned(
bottom: 5,
right: 5,
child: Container(
child: Icon(
Icons.circle,
color: Colors.green,
size: 15,
),
),
),
],
),
SizedBox(height: 4),
Text(
name,
style: TextStyle(
fontWeight: FontWeight.w500, // 사이즈수정
),
overflow: TextOverflow.ellipsis,
),
],
),
),
);
}
}
- ListView.builder안에 ListTile를 사용했을 때 계속 에러가 나는 상황 발생
기본적으로 ListTile을 수직을 지원하는데 ListTile에 가로 스크롤을 넣어서 수평으로 만드려고 해서 계속 에러가 났다.
GestureDetector로 ListTile 대신 사용하여 오류 해결함.