Skip to content

Commit 768a6d4

Browse files
anthonypena97anthonypena97
committed
feat: user details page
1 parent ea4a50c commit 768a6d4

File tree

2 files changed

+250
-1
lines changed

2 files changed

+250
-1
lines changed

‎client/lib/views/details_page.dart‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
import 'package:flutter/src/foundation/key.dart';
2+
import 'package:flutter/src/widgets/framework.dart';
3+
4+
import 'package:flutter/material.dart';
5+
6+
class DetailsPage extends StatefulWidget {
7+
final dynamic user;
8+
const DetailsPage({
9+
Key? key,
10+
this.user,
11+
}) : super(key: key);
12+
13+
@override
14+
State<DetailsPage> createState() => _DetailsPageState();
15+
}
16+
17+
class _DetailsPageState extends State<DetailsPage> {
18+
List _hobbies = [];
19+
List _posts = [];
20+
21+
bool _isHobbies = false;
22+
bool _isPosts = false;
23+
24+
void _toggleHobbiesBtn(){
25+
setState((){
26+
_isHobbies = true;
27+
_isPosts = false;
28+
29+
});
30+
}
31+
32+
void _togglePostsBtn(){
33+
setState((){
34+
_isPosts = true;
35+
_isHobbies = false;
36+
});
37+
}
38+
39+
@override
40+
Widget build(BuildContext context) {
41+
return Scaffold(
42+
appBar: AppBar(
43+
backgroundColor: Colors.transparent,
44+
elevation: 0,
45+
title: Text(
46+
widget.user["name"],
47+
style: const TextStyle(
48+
color: Colors.grey,
49+
fontSize: 19.0,
50+
fontWeight: FontWeight.bold
51+
)
52+
),
53+
),
54+
body: Column(
55+
children: [
56+
Flexible(
57+
flex: 1,
58+
fit: FlexFit.loose,
59+
child: Container(
60+
padding: const EdgeInsets.all(24),
61+
margin: const EdgeInsets.symmetric(
62+
horizontal: 24,
63+
vertical: 6,
64+
),
65+
decoration: BoxDecoration(
66+
color: Colors.white,
67+
borderRadius: BorderRadius.circular(16),
68+
boxShadow: [
69+
BoxShadow(
70+
offset: const Offset(0, 10),
71+
color: Colors.grey.shade300,
72+
blurRadius: 30,
73+
)
74+
],
75+
),
76+
child: Column(
77+
crossAxisAlignment: CrossAxisAlignment.start,
78+
mainAxisSize: MainAxisSize.min,
79+
children: [
80+
Row(
81+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
82+
children: [
83+
Text(
84+
"${widget.user["name"].toUpperCase() ?? "N/A"}",
85+
style: const TextStyle(
86+
fontSize: 16,
87+
fontWeight: FontWeight.bold,
88+
)
89+
),
90+
],
91+
),
92+
Padding(
93+
padding: const EdgeInsets.only(
94+
left: 8.0,
95+
top: 8.0
96+
),
97+
child: Text(
98+
"Occupation: ${widget.user["profession"]}"
99+
)
100+
),
101+
Padding(
102+
padding: const EdgeInsets.all(8.0),
103+
child: Text(
104+
"Age: ${widget.user["age"]}"
105+
)
106+
),
107+
],
108+
),
109+
),
110+
),
111+
Row(
112+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
113+
children: [
114+
Flexible(
115+
flex: 1,
116+
fit: FlexFit.loose,
117+
child: TextButton(
118+
onPressed: (){
119+
setState((){
120+
_hobbies = widget.user["hobbies"];
121+
});
122+
_toggleHobbiesBtn();
123+
},
124+
style: buildButtonStyle(),
125+
child: const Padding(
126+
padding: EdgeInsets.symmetric(
127+
horizontal: 36,
128+
vertical: 12
129+
),
130+
child: Text(
131+
"Hobbies",
132+
style: TextStyle(
133+
color: Colors.grey,
134+
fontSize: 16,
135+
)
136+
),
137+
),
138+
),
139+
),
140+
Flexible(
141+
flex: 1,
142+
fit: FlexFit.loose,
143+
child: TextButton(
144+
onPressed: (){
145+
setState((){
146+
_posts = widget.user["posts"];
147+
});
148+
_togglePostsBtn();
149+
},
150+
style: buildButtonStyle(),
151+
child: const Padding(
152+
padding: EdgeInsets.symmetric(
153+
horizontal: 36,
154+
vertical: 12
155+
),
156+
child: Text(
157+
"Posts",
158+
style: TextStyle(
159+
color: Colors.grey,
160+
fontSize: 16,
161+
)
162+
),
163+
),
164+
),
165+
),
166+
],
167+
),
168+
Visibility(
169+
visible: true,
170+
child: SizedBox(
171+
height: MediaQuery.of(context).size.height * 0.45,
172+
child: ListView.builder(
173+
itemCount: _isHobbies ? _hobbies.length : _posts.length,
174+
itemBuilder: (context, index) {
175+
var data = _isHobbies ? _hobbies[index] : _posts[index];
176+
return Stack(
177+
children: [
178+
Container(
179+
margin: const EdgeInsets.only(
180+
bottom: 30,
181+
left: 10,
182+
right: 10,
183+
top: 22,
184+
),
185+
decoration: BoxDecoration(
186+
borderRadius: BorderRadius.circular(15),
187+
color: Colors.white,
188+
boxShadow: [
189+
BoxShadow(
190+
offset: const Offset(0,10),
191+
color: Colors.grey.shade300,
192+
blurRadius: 30,
193+
)
194+
]
195+
),
196+
padding: const EdgeInsets.all(20),
197+
child: Column(
198+
crossAxisAlignment: CrossAxisAlignment.start,
199+
mainAxisSize: MainAxisSize.min,
200+
children: [
201+
Row(
202+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
203+
children: [
204+
Expanded(
205+
child: Text(
206+
_isHobbies
207+
? "Hobby: ${data["title"]}"
208+
: "${data["comment"]}",
209+
),
210+
),
211+
],
212+
),
213+
Padding(
214+
padding: const EdgeInsets.only(
215+
top: 8.0,
216+
),
217+
child: Text(_isHobbies ? "Description: ${data["description"]}" : ""),
218+
),
219+
],
220+
)
221+
),
222+
],
223+
);
224+
}
225+
),
226+
),
227+
),
228+
],
229+
)
230+
);
231+
}
232+
233+
ButtonStyle buildButtonStyle() {
234+
return ButtonStyle(
235+
backgroundColor: MaterialStateProperty.all(Colors.greenAccent),
236+
);
237+
}
238+
}

‎client/lib/views/users_page.dart‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_graphql/views/details_page.dart';
23
import 'package:flutter_graphql/views/update_user_page.dart';
34
import 'package:graphql_flutter/graphql_flutter.dart';
45

@@ -30,6 +31,7 @@ class _UsersPageState extends State<UsersPage> {
3031
hobbies{
3132
id
3233
title
34+
description
3335
user{
3436
id
3537
}
@@ -76,6 +78,15 @@ class _UsersPageState extends State<UsersPage> {
7678
),
7779
padding: const EdgeInsets.all(20),
7880
child: InkWell(
81+
onTap: () async{
82+
debugPrint(":::User${user.toString()}");
83+
final route = MaterialPageRoute(
84+
builder:(context) {
85+
return DetailsPage(user: user);
86+
},
87+
);
88+
await Navigator.push(context, route);
89+
},
7990
// ignore: avoid_unnecessary_containers
8091
child: Container(
8192
child: Column(
@@ -172,7 +183,7 @@ class _UsersPageState extends State<UsersPage> {
172183
return Container();
173184
},
174185
) : Container(),
175-
_isRemovePosts
186+
_isRemovePosts // Waterfall Event
176187
? Mutation(
177188
options: MutationOptions(
178189
document: gql(removePosts()),

0 commit comments

Comments
 (0)