Skip to content

Commit 153e39a

Browse files
nathansdevnathansdev
authored
Merge pull request #7 from nathansdev/kit/blog
blog app screen type developed in flutter
2 parents 3b77956 + 69a84a4 commit 153e39a

29 files changed

+1629
-19
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Contra flutter kit will be having screens developed in all the categories.(Curre
1616
- Toast
1717
- Chat Screens
1818
- Shopping screens
19+
- Blogs
1920

2021
## Screenshots
2122

@@ -39,6 +40,11 @@ Contra flutter kit will be having screens developed in all the categories.(Curre
3940
<img src = "screenshots/shopping_screen_one.jpg" width=220><img src = "screenshots/shopping_screen_two.jpg" width=220><img src = "screenshots/shopping_screen_three.jpg" width=220>
4041
<img src = "screenshots/shopping_screen_four.jpg" width=220><img src = "screenshots/shopping_screen_five.jpg" width=220><img src = "screenshots/shopping_screen_six.jpg" width=220>
4142

43+
- Blog Screen Types
44+
45+
<img src = "screenshots/blog_type_one.jpg" width=220><img src = "screenshots/blog_type_two.jpg" width=220><img src = "screenshots/blog_type_three.jpg" width=220>
46+
<img src = "screenshots/blog_type_four.jpg" width=220><img src = "screenshots/blog_type_five.jpg" width=220>
47+
4248
## Mentions
4349
- Special thanks to [vijay verma](https://twitter.com/realvjy) for the awesome design kit.
4450
- Link to the wireframe official page [Contra wireframe kit](https://contrauikit.com/)

‎assets/icons/placeholder_icon.svg

Lines changed: 6 additions & 0 deletions
Loading

‎assets/images/peep_lady_one.svg

Lines changed: 14 additions & 0 deletions
Loading

‎assets/images/peep_lady_two.svg

Lines changed: 15 additions & 0 deletions
Loading

‎assets/images/peep_man_one.svg

Lines changed: 15 additions & 0 deletions
Loading

‎lib/blog/blog.dart

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import 'dart:ui';
2+
3+
class Blog {
4+
final String title;
5+
final String description;
6+
final Color bgColor;
7+
final String user;
8+
final String time;
9+
10+
const Blog(
11+
{this.title, this.description, this.bgColor, this.user, this.time});
12+
}
13+
14+
class BlogWithSize {
15+
final String title;
16+
final String description;
17+
final Color bgColor;
18+
final double width;
19+
final double height;
20+
21+
const BlogWithSize(
22+
{this.title, this.description, this.bgColor, this.width, this.height});
23+
}

‎lib/blog/blog_card_type_one.dart

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import 'package:contraflutterkit/custom_widgets/button_plain_with_shadow.dart';
2+
import 'package:contraflutterkit/utils/colors.dart';
3+
import 'package:flutter/cupertino.dart';
4+
import 'package:flutter/material.dart';
5+
6+
import 'blog.dart';
7+
8+
class BlogCardTypeOne extends StatelessWidget {
9+
final VoidCallback onTap;
10+
final Blog blog;
11+
12+
const BlogCardTypeOne({this.onTap, this.blog});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return GestureDetector(
17+
onTap: onTap,
18+
child: Container(
19+
margin: EdgeInsets.only(top: 24),
20+
padding: EdgeInsets.all(24),
21+
decoration: ShapeDecoration(
22+
color: blog.bgColor,
23+
shadows: [
24+
BoxShadow(
25+
color: wood_smoke,
26+
offset: Offset(
27+
0.0, // Move to right 10 horizontally
28+
6.0, // Move to bottom 5 Vertically
29+
),
30+
)
31+
],
32+
shape: RoundedRectangleBorder(
33+
borderRadius: BorderRadius.all(Radius.circular(16)),
34+
side: BorderSide(color: wood_smoke, width: 2))),
35+
child: Column(
36+
crossAxisAlignment: CrossAxisAlignment.start,
37+
children: <Widget>[
38+
Image.asset(
39+
"assets/images/peep_avatar.png",
40+
width: 48,
41+
height: 48,
42+
),
43+
SizedBox(
44+
height: 24,
45+
),
46+
Text(
47+
blog.title,
48+
style: TextStyle(
49+
fontSize: 36,
50+
fontWeight: FontWeight.bold,
51+
color: wood_smoke),
52+
),
53+
SizedBox(
54+
height: 48,
55+
),
56+
Row(
57+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
58+
children: <Widget>[
59+
Column(
60+
crossAxisAlignment: CrossAxisAlignment.start,
61+
children: <Widget>[
62+
Text(
63+
blog.user,
64+
style: TextStyle(
65+
fontSize: 17,
66+
fontWeight: FontWeight.bold,
67+
color: wood_smoke),
68+
),
69+
Text(
70+
blog.time,
71+
style: TextStyle(
72+
fontSize: 13,
73+
fontWeight: FontWeight.normal,
74+
color: wood_smoke),
75+
)
76+
],
77+
),
78+
ButtonPlainWithShadow(
79+
borderColor: wood_smoke,
80+
color: lightening_yellow,
81+
text: "Follow",
82+
height: 48,
83+
size: 120,
84+
callback: () {},
85+
shadowColor: wood_smoke,
86+
),
87+
],
88+
)
89+
],
90+
),
91+
));
92+
}
93+
}

‎lib/blog/blog_card_type_three.dart

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import 'package:contraflutterkit/login/login_text.dart';
2+
import 'package:contraflutterkit/utils/colors.dart';
3+
import 'package:flutter/cupertino.dart';
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter_svg/svg.dart';
6+
7+
import 'blog.dart';
8+
9+
class BlogCardTypeThree extends StatelessWidget {
10+
final VoidCallback onTap;
11+
final Blog blog;
12+
final bool isSubType;
13+
14+
const BlogCardTypeThree({this.onTap, this.blog, this.isSubType});
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return GestureDetector(
19+
onTap: onTap,
20+
child: Container(
21+
margin: EdgeInsets.only(top: 24),
22+
padding: EdgeInsets.all(24),
23+
decoration: ShapeDecoration(
24+
color: blog.bgColor,
25+
shadows: [
26+
BoxShadow(
27+
color: wood_smoke,
28+
offset: Offset(
29+
0.0, // Move to right 10 horizontally
30+
4.0, // Move to bottom 5 Vertically
31+
),
32+
)
33+
],
34+
shape: RoundedRectangleBorder(
35+
borderRadius: BorderRadius.all(Radius.circular(16)),
36+
side: BorderSide(color: wood_smoke, width: 2))),
37+
child: Column(
38+
crossAxisAlignment: CrossAxisAlignment.start,
39+
children: <Widget>[
40+
Row(
41+
children: <Widget>[
42+
Image.asset(
43+
"assets/images/peep_avatar.png",
44+
width: 48,
45+
height: 48,
46+
),
47+
SizedBox(
48+
width: 20,
49+
),
50+
Text(
51+
blog.user,
52+
style: TextStyle(
53+
color: wood_smoke,
54+
fontSize: 15,
55+
fontWeight: FontWeight.w800),
56+
)
57+
],
58+
),
59+
isSubType
60+
? Container(
61+
height: 200,
62+
margin: EdgeInsets.symmetric(vertical: 24),
63+
width: MediaQuery.of(context).size.width,
64+
decoration: ShapeDecoration(
65+
shadows: [
66+
BoxShadow(
67+
color: Colors.red,
68+
offset: Offset(
69+
0.0, // Move to right 10 horizontally
70+
0.0, // Move to bottom 5 Vertically
71+
),
72+
)
73+
],
74+
color: carribean_green,
75+
shape: RoundedRectangleBorder(
76+
borderRadius: BorderRadius.all(Radius.circular(16)),
77+
side: BorderSide(color: wood_smoke, width: 2)),
78+
),
79+
child: Stack(
80+
alignment: Alignment.centerLeft,
81+
children: <Widget>[
82+
Positioned.fill(
83+
child: Align(
84+
alignment: Alignment.centerLeft,
85+
child: SvgPicture.asset(
86+
"assets/images/peep_lady_two.svg"))),
87+
Positioned.fill(
88+
child: Align(
89+
alignment: Alignment.center,
90+
child: SvgPicture.asset(
91+
"assets/images/peep_man_one.svg"))),
92+
Positioned.fill(
93+
child: Align(
94+
alignment: Alignment.centerRight,
95+
child: SvgPicture.asset(
96+
"assets/images/peep_lady_one.svg")))
97+
],
98+
),
99+
)
100+
: Container(
101+
child: Column(
102+
children: <Widget>[
103+
SizedBox(
104+
height: 24,
105+
),
106+
Text(
107+
blog.title,
108+
style: TextStyle(
109+
fontSize: 36,
110+
fontWeight: FontWeight.bold,
111+
color: wood_smoke),
112+
),
113+
SizedBox(
114+
height: 48,
115+
),
116+
],
117+
),
118+
),
119+
Row(
120+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
121+
children: <Widget>[
122+
Expanded(
123+
flex: 1,
124+
child: Row(
125+
children: <Widget>[
126+
Expanded(
127+
flex: 1,
128+
child: Row(
129+
children: <Widget>[
130+
Icon(
131+
Icons.chat_bubble_outline,
132+
color: wood_smoke,
133+
),
134+
SizedBox(
135+
width: 10,
136+
),
137+
LoginText(
138+
text: "324",
139+
size: 13,
140+
alignment: Alignment.center,
141+
)
142+
],
143+
),
144+
),
145+
SizedBox(
146+
width: 20,
147+
),
148+
Expanded(
149+
flex: 1,
150+
child: Row(
151+
children: <Widget>[
152+
Icon(
153+
Icons.favorite_border,
154+
color: wood_smoke,
155+
),
156+
SizedBox(
157+
width: 10,
158+
),
159+
LoginText(
160+
text: "3.2k",
161+
size: 13,
162+
alignment: Alignment.center,
163+
)
164+
],
165+
),
166+
)
167+
],
168+
),
169+
),
170+
Expanded(
171+
flex: 1,
172+
child: Row(
173+
mainAxisAlignment: MainAxisAlignment.end,
174+
children: [
175+
Icon(
176+
Icons.share,
177+
color: wood_smoke,
178+
),
179+
],
180+
),
181+
),
182+
],
183+
)
184+
],
185+
),
186+
));
187+
}
188+
}

‎lib/blog/blog_card_type_two.dart

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import 'package:contraflutterkit/utils/colors.dart';
2+
import 'package:flutter/cupertino.dart';
3+
import 'package:flutter/material.dart';
4+
5+
import 'blog.dart';
6+
7+
class BlogCardTypeTwo extends StatelessWidget {
8+
final VoidCallback onTap;
9+
final Blog blog;
10+
11+
const BlogCardTypeTwo({this.onTap, this.blog});
12+
13+
@override
14+
Widget build(BuildContext context) {
15+
return GestureDetector(
16+
onTap: onTap,
17+
child: Container(
18+
margin: EdgeInsets.only(top: 24),
19+
padding: EdgeInsets.all(24),
20+
decoration: ShapeDecoration(
21+
color: blog.bgColor,
22+
shadows: [
23+
BoxShadow(
24+
color: wood_smoke,
25+
offset: Offset(
26+
0.0, // Move to right 10 horizontally
27+
4.0, // Move to bottom 5 Vertically
28+
),
29+
)
30+
],
31+
shape: RoundedRectangleBorder(
32+
borderRadius: BorderRadius.all(Radius.circular(16)),
33+
side: BorderSide(color: wood_smoke, width: 2))),
34+
child: Column(
35+
crossAxisAlignment: CrossAxisAlignment.start,
36+
children: <Widget>[
37+
Text(
38+
"by " + blog.user + " • " + blog.time,
39+
style: TextStyle(
40+
fontSize: 12, fontWeight: FontWeight.bold, color: trout),
41+
),
42+
SizedBox(
43+
height: 24,
44+
),
45+
Text(
46+
blog.title,
47+
maxLines: 2,
48+
overflow: TextOverflow.ellipsis,
49+
style: TextStyle(
50+
fontSize: 24,
51+
fontWeight: FontWeight.w800,
52+
color: wood_smoke),
53+
),
54+
],
55+
),
56+
));
57+
}
58+
}

0 commit comments

Comments
 (0)