Skip to content

Commit 4362bd3

Browse files
oxomioxomi
authored
feat: 가족 만보기 화면 구현 완료 (Neibce/OnGi#53)
* feat: 가족 만보기 화면 구현 (미완성) * feat: 가족 만보기 화면 구현 2 (미완성) * feat: 가족 만보기 화면 구현 완료
1 parent 415baca commit 4362bd3

File tree

5 files changed

+222
-2
lines changed

5 files changed

+222
-2
lines changed

‎frontend/ongi/assets/images/step_tracker_crown.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/ongi/assets/images/step_tracker_light_background.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/ongi/assets/images/step_tracker_rectangle.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/ongi/lib/screens/health/family_step_tracker_screen.dart‎

Lines changed: 210 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import '../../core/app_colors.dart';
3+
import 'package:flutter_svg/flutter_svg.dart';
34

45
class FamilyStepTrackerScreen extends StatefulWidget {
56
const FamilyStepTrackerScreen({super.key});
@@ -81,15 +82,222 @@ class _FamilyStepTrackerScreenState extends State<FamilyStepTrackerScreen> {
8182
),
8283
),
8384
Positioned(
84-
top: circleSize * 0.3 + 60,
85+
top: circleSize * 0.43,
8586
left: 0,
8687
right: 0,
8788
bottom: 0,
88-
child: Text("여기부터 본문을 생성 ㅇ.ㅇ"),
89+
child: Container(
90+
width: double.infinity,
91+
height: double.infinity,
92+
child: Stack(
93+
children: [
94+
// 배경 SVG
95+
Positioned.fill(
96+
child: Padding(
97+
padding: const EdgeInsets.symmetric(horizontal: 17),
98+
child: Container(
99+
decoration: BoxDecoration(
100+
color: Colors.white,
101+
borderRadius: BorderRadius.circular(20),
102+
),
103+
),
104+
),
105+
),
106+
// 본문 내용
107+
Padding(
108+
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
109+
child: Column(
110+
crossAxisAlignment: CrossAxisAlignment.start,
111+
children: [
112+
Text(
113+
'오늘 우리 가족은',
114+
style: const TextStyle(
115+
fontFamily: 'Pretendard',
116+
fontWeight: FontWeight.w600,
117+
fontSize: 20,
118+
color: Color(0xFFFD6C01),
119+
),
120+
),
121+
const SizedBox(height: 2),
122+
RichText(
123+
text: TextSpan(
124+
children: [
125+
TextSpan(
126+
text: '총 ',
127+
style: const TextStyle(
128+
fontFamily: 'Pretendard',
129+
fontWeight: FontWeight.w600,
130+
fontSize: 20,
131+
color: Color(0xFFFD6C01),
132+
),
133+
),
134+
TextSpan(
135+
text: '77,804걸음', // 예시 총 걸음수
136+
style: const TextStyle(
137+
fontFamily: 'Pretendard',
138+
fontWeight: FontWeight.w700,
139+
fontSize: 40,
140+
color: Color(0xFFFD6C01),
141+
),
142+
),
143+
TextSpan(
144+
text: ' 걸었어요!',
145+
style: const TextStyle(
146+
fontFamily: 'Pretendard',
147+
fontWeight: FontWeight.w600,
148+
fontSize: 20,
149+
color: Color(0xFFFD6C01),
150+
),
151+
),
152+
],
153+
),
154+
),
155+
SizedBox(height:50),
156+
// 가족별 걸음수 리스트만 스크롤
157+
Expanded(
158+
child: LayoutBuilder(
159+
builder: (context, constraints) {
160+
final pillWidth = constraints.maxWidth;
161+
return SingleChildScrollView(
162+
clipBehavior: Clip.none,
163+
child: Column(
164+
crossAxisAlignment: CrossAxisAlignment.center,
165+
children: [
166+
_buildStepMember(
167+
context: context,
168+
name: '양은명',
169+
steps: 28301,
170+
image: 'assets/images/users/elderly_woman.png',
171+
isTop: true,
172+
pillWidth: pillWidth,
173+
),
174+
_buildStepMember(
175+
context: context,
176+
name: '오애순',
177+
steps: 20315,
178+
image: 'assets/images/users/elderly_woman.png',
179+
pillWidth: pillWidth,
180+
),
181+
_buildStepMember(
182+
context: context,
183+
name: '양관식',
184+
steps: 17336,
185+
image: 'assets/images/users/elderly_woman.png',
186+
pillWidth: pillWidth,
187+
),
188+
_buildStepMember(
189+
context: context,
190+
name: '양금명',
191+
steps: 11852,
192+
image: 'assets/images/users/elderly_woman.png',
193+
pillWidth: pillWidth,
194+
),
195+
],
196+
),
197+
);
198+
},
199+
),
200+
),
201+
],
202+
),
203+
),
204+
],
205+
),
206+
),
89207
),
90208
],
91209
),
92210
),
93211
);
94212
}
95213
}
214+
215+
216+
Widget _buildStepMember({required BuildContext context, required String name, required int steps, required String image, bool isTop = false, required double pillWidth}) {
217+
return Container(
218+
margin: const EdgeInsets.only(bottom: 12),
219+
child: Row(
220+
crossAxisAlignment: CrossAxisAlignment.end,
221+
children: [
222+
// 프로필 이미지 (pill 왼쪽)
223+
Stack(
224+
clipBehavior: Clip.none,
225+
children: [
226+
Container(
227+
width: 70,
228+
height: 80,
229+
child: ClipOval(
230+
child: Image.asset(image, fit: BoxFit.cover),
231+
),
232+
),
233+
if (isTop)
234+
Positioned(
235+
left: -12,
236+
top: -20,
237+
child: SizedBox(
238+
width: 42,
239+
height: 32,
240+
child: SvgPicture.asset('assets/images/step_tracker_crown.svg'),
241+
),
242+
),
243+
],
244+
),
245+
const SizedBox(width: 8),
246+
// pill형 Container (radius 20, 오렌지)
247+
Expanded(
248+
child: Container(
249+
decoration: BoxDecoration(
250+
color: Color(0xFFFD6C01),
251+
borderRadius: BorderRadius.circular(20),
252+
),
253+
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
254+
child: Column(
255+
crossAxisAlignment: CrossAxisAlignment.start,
256+
children: [
257+
Text(
258+
name,
259+
overflow: TextOverflow.ellipsis,
260+
maxLines: 1,
261+
style: const TextStyle(
262+
fontFamily: 'Pretendard',
263+
fontWeight: FontWeight.w600,
264+
fontSize: 15,
265+
color: Colors.white,
266+
),
267+
),
268+
Row(
269+
crossAxisAlignment: CrossAxisAlignment.baseline,
270+
textBaseline: TextBaseline.alphabetic,
271+
children: [
272+
Spacer(),
273+
Text(
274+
steps.toString().replaceAllMapped(RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'), (m) => '${m[1]},'),
275+
style: const TextStyle(
276+
fontFamily: 'Pretendard',
277+
fontWeight: FontWeight.w600,
278+
fontSize: 40,
279+
height: 0.7,
280+
color: Colors.white,
281+
),
282+
overflow: TextOverflow.ellipsis,
283+
),
284+
const SizedBox(width: 4),
285+
Text(
286+
'걸음',
287+
style: const TextStyle(
288+
fontFamily: 'Pretendard',
289+
fontWeight: FontWeight.w600,
290+
fontSize: 20,
291+
color: Colors.white,
292+
),
293+
),
294+
],
295+
),
296+
],
297+
),
298+
),
299+
),
300+
],
301+
),
302+
);
303+
}

‎frontend/ongi/pubspec.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ flutter:
5151
- assets/images/exercise_record_title_logo.png
5252
- assets/images/walk_icon.svg
5353
- assets/images/users/elderly_woman.png
54+
- assets/images/step_tracker_crown.svg
55+
- assets/images/step_tracker_light_background.svg
56+
- assets/images/step_tracker_rectangle.svg
5457

5558
fonts:
5659
- family: Pretendard

0 commit comments

Comments
 (0)