Skip to content

Commit

Permalink
#14 편지함 및 편지리스트 UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@codeJiwon
codeJiwon committed Jan 1, 2024
1 parent 2e3543f commit 73c6004
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 100 deletions.
5 changes: 1 addition & 4 deletions unibond/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,10 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
useMaterial3: true,
),
home: LetterBoxScreen(fakeEnvelopes: [
LetterEnvelope(date: '2023-10-15', sender: '지지진'),
LetterEnvelope(date: '2023-10-14', sender: '진지지'),
LetterEnvelope(date: '2023-10-14', sender: '지진지'),
//추가 편지봉투를 여기에 추가
])
// home: DetailScreen(
Expand Down
94 changes: 72 additions & 22 deletions unibond/lib/view/screens/letter/letter_box_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,103 @@ import 'package:unibond/view/screens/letter/letter_list_screen.dart';
import 'package:unibond/view/screens/user/profile_screen.dart';
import 'package:unibond/view/widgets/navigator.dart';

// @override
// Widget build(BuildContext context) {
// return MaterialApp(
// home: LetterBoxScreen(
// fakeEnvelopes: [
// LetterEnvelope(date: '2023-10-15', sender: '지지진'),
// LetterEnvelope(date: '2023-10-14', sender: '진지지'),
// //추가 편지봉투를 여기에 추가
// ],
// ),
// );
// }

class LetterEnvelope {
final String date;
final String sender;

LetterEnvelope({required this.date, required this.sender});
}

class LetterBoxScreen extends StatelessWidget {
final List<LetterEnvelope> fakeEnvelopes;

class LetterBoxScreen extends StatefulWidget {
const LetterBoxScreen({Key? key, required this.fakeEnvelopes})
: super(key: key);

final List<LetterEnvelope> fakeEnvelopes;

@override
_LetterBoxScreenState createState() => _LetterBoxScreenState();
}

class _LetterBoxScreenState extends State<LetterBoxScreen> {
int currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('편지함'),
title: Row(
children: [
GestureDetector(
onTap: () {
setState(() {
currentIndex = 0;
});
},
child: Text(
'편지함',
style: TextStyle(
fontWeight: currentIndex == 0
? FontWeight.bold
: FontWeight.normal),
),
),
const SizedBox(width: 16),
GestureDetector(
onTap: () {
setState(() {
currentIndex = 1;
});
},
child: Text(
'좋아함',
style: TextStyle(
fontWeight: currentIndex == 1
? FontWeight.bold
: FontWeight.normal),
),
),
],
),
automaticallyImplyLeading: false,
),
body: ListView.builder(
itemCount: fakeEnvelopes.length,
itemCount: widget.fakeEnvelopes.length,
itemBuilder: (context, index) {
final envelope = fakeEnvelopes[index];
final envelope = widget.fakeEnvelopes[index];
final List<List<Color>> colorSets = [
[Color(0xFFD08EFF), Color(0xFFFFACC6)],
[Color(0xFFFF88AC), Color(0xFFFFE9CC)],
[Color(0xFF99B9FF), Color(0xFFCA80FF)],
];

final colorSet = colorSets[index % colorSets.length];

return GestureDetector(
onTap: () {
// TODO: 각 편지를 구분하는 id 넘기기
Get.to(() => const LetterList());
Get.to(
() => LetterList(
backgroundColor1: colorSet[0],
backgroundColor2: colorSet[1],
sender: envelope.sender,
date: envelope.date,
),
);
},
child: Card(
elevation: 4, // 그림자 효과 추가
margin: const EdgeInsets.all(8.0), // 여백 추가
margin: const EdgeInsets.all(20.0), // 여백 추가
child: Container(
height: 180,
width: 160,
padding: const EdgeInsets.all(16.0), // 내용 여백 추가
decoration: BoxDecoration(
gradient: LinearGradient(
colors: colorSet,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expand All @@ -61,7 +111,6 @@ class LetterBoxScreen extends StatelessWidget {
Text(envelope.date,
style:
const TextStyle(fontWeight: FontWeight.bold)),
const Icon(Icons.mail_outline), // 편지 아이콘
],
),
const SizedBox(height: 8), // 간격 추가
Expand Down Expand Up @@ -94,6 +143,7 @@ class LetterBoxScreen extends StatelessWidget {
fakeEnvelopes: [
LetterEnvelope(date: '2023-10-15', sender: '지지진'),
LetterEnvelope(date: '2023-10-14', sender: '진지지'),
LetterEnvelope(date: '2023-10-14', sender: '지진지'),
],
)),
);
Expand Down
125 changes: 74 additions & 51 deletions unibond/lib/view/screens/letter/letter_list_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,18 @@ import 'package:unibond/domain/letter/letter.dart';
import 'package:unibond/view/screens/letter/letter_read_screen.dart';

class LetterList extends StatelessWidget {
const LetterList({super.key});
final Color backgroundColor1;
final Color backgroundColor2;
final String sender;
final String date;

const LetterList({
required this.backgroundColor1,
required this.backgroundColor2,
required this.sender,
required this.date,
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
Expand All @@ -19,64 +30,76 @@ class LetterList extends StatelessWidget {
},
),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 10, // 예제를 위한 임시 데이터 수
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: GestureDetector(
onTap: () {
Get.to(LetterReadScreen(
letter: Letter(
id: 1,
receiverId: 2,
title: "저는 오늘 행복한 하루를 보냈어요.",
content: "마음이 잘 통하는 친구를 만난 것 같거든요.",
isliked: true),
));
},
child: Card(
elevation: 4.0, // 카드 그림자 깊이
child: Container(
padding: const EdgeInsets.all(16.0),
width: 300,
height: 200,
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"From. 오지지",
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.bold),
body: Center(
child: Stack(
alignment: Alignment.center,
children: List.generate(
10,
(index) {
double topPosition = index * 50.0;

Color backgroundColor =
index.isEven ? backgroundColor1 : backgroundColor2;

return Positioned(
top: topPosition,
child: GestureDetector(
onTap: () {
Get.to(LetterReadScreen(
letter: Letter(
id: 1,
receiverId: 2,
title: "저는 오늘 행복한 하루를 보냈어요.",
content: "마음이 잘 통하는 친구를 만난 것 같거든요.",
isliked: true,
),
));
},
child: Card(
elevation: 4.0, // 카드 그림자 깊이
child: Container(
padding: const EdgeInsets.all(16.0),
width: 300,
height: 200,
decoration: BoxDecoration(
color: backgroundColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"2023-11-27",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
Center(
child: Text(
"저는 오늘 행복한 하루를 보냈어요",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
Center(
child: Text(
"저는 오늘 행복한 하루를 보냈어요",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.bottomRight,
child: Text(
"2023-11-27",
style: TextStyle(fontSize: 12),
),
),
Align(
alignment: Alignment.bottomRight,
child: Text(
"From. $sender",
style: TextStyle(fontSize: 12),
),
],
),
),
],
),
),
),
);
},
),
),
);
},
),
],
),
),
);
}
Expand Down
Loading

0 comments on commit 73c6004

Please sign in to comment.