Skip to content

Commit f7d74b8

Browse files
BenjaminMahmicBenjaminMahmic
committed
social media app ui - done
1 parent 8335932 commit f7d74b8

14 files changed

+481
-139
lines changed

‎lib/chose_app_screen/chose_app_screen.dart

+11-42
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'package:demo_projects/chose_app_screen/models/chose_app_model.dart';
22
import 'package:flutter/material.dart';
33

4-
import '../social_media_1/social_media_1_main.dart';
4+
import '../social_media_1/welcome_screen/welcome_screen.dart';
55
import 'components/app_card.dart';
66

77
class ChoseAppScreen extends StatefulWidget {
@@ -12,27 +12,21 @@ class ChoseAppScreen extends StatefulWidget {
1212
}
1313

1414
class _ChoseAppScreenState extends State<ChoseAppScreen> {
15-
int _currentPage = 0;
16-
17-
final _pageController = PageController(
18-
viewportFraction: .75,
19-
initialPage: 0,
20-
);
2115
final List<ChoseAppModel> _apps = [
2216
ChoseAppModel(
23-
screen: const SocialMedia1Main(),
17+
screen: const App1MainScreen(),
2418
title: 'Social media app 1',
2519
),
2620
ChoseAppModel(
27-
screen: const SocialMedia1Main(),
21+
screen: const App1MainScreen(),
2822
title: 'Chat app',
2923
),
3024
ChoseAppModel(
31-
screen: const SocialMedia1Main(),
25+
screen: const App1MainScreen(),
3226
title: 'Instagram redesign',
3327
),
3428
ChoseAppModel(
35-
screen: const SocialMedia1Main(),
29+
screen: const App1MainScreen(),
3630
title: 'Viber redesign',
3731
),
3832
];
@@ -52,37 +46,12 @@ class _ChoseAppScreenState extends State<ChoseAppScreen> {
5246
end: Alignment.topCenter,
5347
),
5448
),
55-
child: Column(
56-
crossAxisAlignment: CrossAxisAlignment.center,
57-
mainAxisAlignment: MainAxisAlignment.center,
58-
children: [
59-
Expanded(
60-
child: PageView.builder(
61-
controller: _pageController,
62-
itemCount: _apps.length,
63-
onPageChanged: (i) {
64-
setState(() => _currentPage = i);
65-
},
66-
itemBuilder: (context, i) {
67-
return AnimatedContainer(
68-
height: double.infinity,
69-
duration: const Duration(milliseconds: 300),
70-
margin: EdgeInsets.symmetric(
71-
horizontal: _currentPage == i ? 0 : 15,
72-
vertical: _currentPage == i ? 20 : 60,
73-
),
74-
child: AnimatedOpacity(
75-
duration: const Duration(milliseconds: 300),
76-
opacity: _currentPage == i ? 1 : .6,
77-
child: AppCard(
78-
choseAppModel: _apps[i],
79-
),
80-
),
81-
);
82-
},
83-
),
84-
),
85-
],
49+
child: ListView.builder(
50+
itemCount: _apps.length,
51+
itemBuilder: ((context, index) {
52+
final app = _apps[index];
53+
return AppCard(choseAppModel: app);
54+
}),
8655
),
8756
),
8857
),

‎lib/chose_app_screen/components/app_card.dart

+29-33
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ class AppCard extends StatelessWidget {
2020
);
2121
},
2222
child: Container(
23-
padding: const EdgeInsets.symmetric(horizontal: 80),
23+
margin: const EdgeInsets.fromLTRB(8, 8, 10, 0),
24+
padding: const EdgeInsets.symmetric(horizontal: 25),
2425
alignment: Alignment.center,
2526
decoration: BoxDecoration(
2627
borderRadius: BorderRadius.circular(10),
@@ -30,7 +31,7 @@ class AppCard extends StatelessWidget {
3031
),
3132
fit: BoxFit.cover,
3233
colorFilter: ColorFilter.mode(
33-
Colors.black.withOpacity(.6),
34+
Colors.black.withOpacity(.8),
3435
BlendMode.darken,
3536
),
3637
),
@@ -41,45 +42,40 @@ class AppCard extends StatelessWidget {
4142
)
4243
],
4344
),
44-
child: Padding(
45-
padding: const EdgeInsets.only(
46-
bottom: 50,
47-
),
48-
child: RotatedBox(
49-
quarterTurns: -1,
50-
child: Text(
45+
child: Column(
46+
children: [
47+
const SizedBox(height: 40),
48+
Text(
5149
choseAppModel.title,
5250
style: const TextStyle(
5351
fontWeight: FontWeight.w900,
54-
color: Colors.white70,
55-
fontSize: 45,
52+
color: Colors.white,
53+
fontSize: 24,
5654
height: 1.5,
5755
),
5856
textAlign: TextAlign.center,
5957
),
60-
),
61-
),
62-
),
63-
),
64-
Positioned(
65-
left: 0,
66-
right: 0,
67-
bottom: 20,
68-
child: Column(
69-
children: const [
70-
Icon(
71-
Icons.arrow_forward,
72-
color: Colors.white,
73-
),
74-
SizedBox(height: 15),
75-
Text(
76-
'Tap to continue to this app preview',
77-
style: TextStyle(
78-
color: Colors.grey,
79-
fontSize: 12,
58+
const SizedBox(height: 40),
59+
Column(
60+
children: const [
61+
Text(
62+
'Tap to continue to this app preview',
63+
style: TextStyle(
64+
color: Colors.white30,
65+
fontSize: 12,
66+
),
67+
),
68+
SizedBox(height: 10),
69+
Icon(
70+
Icons.arrow_forward,
71+
color: Colors.white30,
72+
size: 14,
73+
),
74+
],
8075
),
81-
),
82-
],
76+
const SizedBox(height: 15),
77+
],
78+
),
8379
),
8480
),
8581
],

‎lib/main.dart

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import 'package:demo_projects/chose_app_screen/chose_app_screen.dart';
2+
import 'package:demo_projects/social_media_1/welcome_screen/welcome_screen.dart';
23
import 'package:flutter/material.dart';
4+
import 'package:google_fonts/google_fonts.dart';
35

46
void main() {
57
runApp(const MyApp());
@@ -14,9 +16,14 @@ class MyApp extends StatelessWidget {
1416
title: 'Demo Projects',
1517
debugShowCheckedModeBanner: false,
1618
theme: ThemeData(
19+
textTheme: GoogleFonts.poppinsTextTheme(),
1720
primarySwatch: Colors.blue,
21+
scaffoldBackgroundColor: Colors.white,
1822
),
1923
home: const ChoseAppScreen(),
24+
routes: {
25+
App1MainScreen.routeName: (context) => const App1MainScreen(),
26+
},
2027
);
2128
}
2229
}

‎lib/social_media_1/dummy_data.dart

+14
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@ List<UserModel> users = [
1616
'https://media.istockphoto.com/photos/young-adult-afro-american-woman-in-bathrobe-making-self-portrait-picture-id1269676921?k=20&m=1269676921&s=612x612&w=0&h=Ja7jlN_wX1xpXjzKN6gygAaODT_irMC-IIt9dutvZpQ=',
1717
'https://media.istockphoto.com/photos/smiling-young-fitness-woman-make-a-selfie-picture-id647373890?k=20&m=647373890&s=612x612&w=0&h=bLEjssxnexKwKOP1am5JzMNb4ZmN_JRMxekiC0rJDA8=',
1818
],
19+
recentActivity: [
20+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ante sit amet lectus scelerisque.',
21+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit.',
22+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus velit, fermentum sed nulla vel, sagittis lacinia arcu. Proin sed varius leo. Phasellus auctor fermentum purus, sed rutrum velit rhoncus.',
23+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
24+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit.',
25+
],
1926
),
2027
UserModel(
2128
socialMediaName: '@alexyyy',
@@ -33,5 +40,12 @@ List<UserModel> users = [
3340
'https://media.istockphoto.com/photos/happy-african-girl-blogger-holding-smartphone-shooting-vlog-or-video-picture-id1270274332?k=20&m=1270274332&s=612x612&w=0&h=lOWlJ9dHQwpU0Ncf2PIHsh8tmguH4mlDLtWKWA16R-0=',
3441
'https://media.istockphoto.com/photos/hiker-female-under-the-rain-take-a-selfie-picture-id1318164240?k=20&m=1318164240&s=612x612&w=0&h=0ydSuEyjJctEMgAAKu7PQnkd4yFRNGCFRgAmhGrdo5s=',
3542
],
43+
recentActivity: [
44+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ante sit amet lectus scelerisque.',
45+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit.',
46+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus velit, fermentum sed nulla vel, sagittis lacinia arcu. Proin sed varius leo. Phasellus auctor fermentum purus, sed rutrum velit rhoncus.',
47+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
48+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit.',
49+
],
3650
),
3751
];

‎lib/social_media_1/home_screen/home_screen.dart

+19-18
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@ class _HomeScreenState extends State<HomeScreen> {
9595

9696
Navigator.of(context).push(
9797
MaterialPageRoute(
98-
builder: (context) => const ProfileDetailScreen(),
98+
builder: (context) => ProfileDetailScreen(
99+
user: currentUser,
100+
),
99101
),
100102
);
101103

@@ -282,28 +284,27 @@ class _HomeScreenState extends State<HomeScreen> {
282284
],
283285
),
284286
),
285-
const SizedBox(height: 50),
287+
const SizedBox(height: 20),
286288
Align(
287289
alignment: Alignment.center,
288-
child: Column(
289-
crossAxisAlignment: CrossAxisAlignment.center,
290-
children: const [
291-
Icon(
292-
Icons.arrow_circle_up,
293-
color: Colors.grey,
294-
size: 16,
295-
),
296-
Text(
297-
'Swipe up to see the profile in detail',
298-
style: TextStyle(
299-
color: Colors.grey,
300-
fontSize: 12,
301-
),
290+
child: Container(
291+
padding: const EdgeInsets.symmetric(
292+
horizontal: 20,
293+
vertical: 4,
294+
),
295+
decoration: BoxDecoration(
296+
color: Colors.white38,
297+
borderRadius: BorderRadius.circular(10),
298+
),
299+
child: const Text(
300+
'Swipe up to see the profile in detail',
301+
style: TextStyle(
302+
fontSize: 12,
302303
),
303-
],
304+
),
304305
),
305306
),
306-
const SizedBox(height: 20),
307+
const SizedBox(height: 5),
307308
],
308309
),
309310
),

‎lib/social_media_1/models/user_model.dart

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class UserModel {
88
final int followers;
99
final bool onlineStatus;
1010
final List<String> images;
11+
final List<String> recentActivity;
1112

1213
UserModel({
1314
required this.socialMediaName,
@@ -19,5 +20,6 @@ class UserModel {
1920
required this.followers,
2021
this.onlineStatus = true,
2122
required this.images,
23+
required this.recentActivity,
2224
});
2325
}

‎lib/social_media_1/profile_detail_screen/components/profile_image.dart

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import 'package:flutter/material.dart';
2+
3+
class ProfileImage extends StatelessWidget {
4+
final String imageUrl;
5+
6+
const ProfileImage({
7+
super.key,
8+
required this.imageUrl,
9+
});
10+
11+
@override
12+
Widget build(BuildContext context) {
13+
return FlexibleSpaceBar(
14+
background: Center(
15+
child: Stack(
16+
children: [
17+
Container(
18+
margin: const EdgeInsets.only(top: 30),
19+
height: 180,
20+
width: 180,
21+
decoration: BoxDecoration(
22+
color: Colors.grey,
23+
shape: BoxShape.circle,
24+
image: DecorationImage(
25+
image: NetworkImage(imageUrl),
26+
fit: BoxFit.cover,
27+
),
28+
),
29+
),
30+
const Positioned(
31+
left: 0,
32+
top: 30,
33+
child: CircleAvatar(
34+
radius: 25,
35+
backgroundColor: Color.fromRGBO(80, 88, 92, 1),
36+
child: Icon(
37+
Icons.message,
38+
color: Colors.white,
39+
size: 18,
40+
),
41+
),
42+
),
43+
const Positioned(
44+
left: 15,
45+
bottom: 23,
46+
child: CircleAvatar(
47+
radius: 8,
48+
backgroundColor: Color.fromRGBO(50, 250, 181, 1),
49+
),
50+
),
51+
const Positioned(
52+
right: 0,
53+
bottom: 0,
54+
child: CircleAvatar(
55+
radius: 25,
56+
backgroundColor: Color.fromRGBO(80, 88, 92, 1),
57+
child: Icon(
58+
Icons.add,
59+
color: Colors.white,
60+
size: 18,
61+
),
62+
),
63+
),
64+
],
65+
),
66+
),
67+
);
68+
}
69+
}

0 commit comments

Comments
 (0)