Skip to content

Commit

Permalink
포스트 카드 ui 개선
Browse files Browse the repository at this point in the history
  • Loading branch information
@ottuck
ottuck committed Aug 27, 2024
1 parent 0fdba8d commit 9408f79
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 124 deletions.
2 changes: 1 addition & 1 deletion lib/core/TopScreen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class TopScreen extends ConsumerWidget {
selectedIconTheme: const IconThemeData(color: Colors.black),
selectedItemColor: Colors.black,
unselectedIconTheme: const IconThemeData(color: Colors.grey),
backgroundColor: Colors.blueGrey[100],
backgroundColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.podcasts),
Expand Down
191 changes: 68 additions & 123 deletions lib/feature/post/widget/PostListViewItemWidget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,147 +18,92 @@ class PostListViewItemWidget extends StatefulWidget {
_PostListViewItemWidgetState createState() => _PostListViewItemWidgetState();
}

// 카드 스타일을 위한 변수
final cardDecoration = BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 3,
blurRadius: 5,
offset: const Offset(0, 3), // 그림자 위치
),
],
);

class _PostListViewItemWidgetState extends State<PostListViewItemWidget> {
bool isLiked = false; // 좋아요 상태를 저장하는 변수
bool showComment = false; // 댓글 표시 여부를 저장하는 변수
bool isLiked = false;

@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
decoration: cardDecoration,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
children: [
// 이미지
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
color: Colors.grey[200],
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 3,
color: Colors.white,
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://via.placeholder.com/150', // 프로필 이미지 URL
),
),
const SizedBox(width: 10),
const Text(
'Jennifer_Cole', // 사용자 이름
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const Spacer(),
IconButton(
icon: const Icon(Icons.more_horiz),
onPressed: () {
// 추가 옵션 클릭 시 동작
},
),
],
),
const SizedBox(height: 10),
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: AspectRatio(
aspectRatio: 1.0, // 이미지 1:1 비율 설정
child: Image.network(
widget.imageUrl,
width: double.infinity,
height: 200,
fit: BoxFit.cover,
),
),
// 제목과 날짜를 이미지 위에 오버레이
Positioned(
bottom: 10,
left: 10,
right: 10,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
widget.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white,
shadows: [
Shadow(
offset: Offset(0, 1),
blurRadius: 3.0,
color: Colors.black,
),
],
),
),
const SizedBox(height: 5),
Text(
widget.uploadTime,
style: const TextStyle(
color: Colors.white70,
fontSize: 12,
shadows: [
Shadow(
offset: Offset(0, 1),
blurRadius: 3.0,
color: Colors.black,
),
],
IconButton(
icon: Icon(
isLiked ? Icons.favorite : Icons.favorite_border,
color: isLiked ? Colors.red : Colors.grey,
),
onPressed: () {
setState(() {
isLiked = !isLiked;
});
},
),
const SizedBox(width: 5),
const Text('1,242'),
const SizedBox(width: 20),
const Icon(Icons.chat_bubble_outline),
const SizedBox(width: 5),
const Text('24'),
],
),
),
],
),
const SizedBox(height: 10),
// 본문 내용
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Text(
widget.content,
style: const TextStyle(
fontSize: 16,
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 좋아요 버튼
IconButton(
icon: Icon(
isLiked ? Icons.thumb_up : Icons.thumb_up_off_alt,
color: isLiked ? Colors.blue : Colors.grey,
),
onPressed: () {
setState(() {
isLiked = !isLiked; // 좋아요 상태 토글
});
},
),
// 댓글 달기 버튼
IconButton(
onPressed: () => setState(() {
showComment = !showComment; // 댓글 표시 여부 토글
}),
icon: const Icon(Icons.comment))
const Icon(Icons.bookmark_border),
],
),
),
// 임시 댓글 표시
if (showComment)
const Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Divider(), // 구분선 추가
Text(
'정우님 항상 감사합니다',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 10),
],
),
),
],
],
),
),
),
);
Expand Down

0 comments on commit 9408f79

Please sign in to comment.