Skip to content

Commit 47b6852

Browse files
sipra-acharyasipra-acharya
committed
cards component added
1 parent de324c0 commit 47b6852

File tree

3 files changed

+307
-4
lines changed

3 files changed

+307
-4
lines changed

‎gf_web/lib/screens/cards/cards.dart‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:gf_web/screens/layout/layout.dart';
3+
import '../../styles/styles.dart';
4+
import 'package:ui_kit/components/button/gf_button.dart';
5+
import 'package:ui_kit/components/card/gf_card.dart';
6+
import 'package:ui_kit/colors/gf_color.dart';
7+
import 'package:ui_kit/types/gf_type.dart';
8+
import 'package:ui_kit/components/button/gf_button_bar.dart';
9+
import 'package:ui_kit/components/list_tile/gf_list_tile.dart';
10+
import 'package:ui_kit/components/avatar/gf_avatar.dart';
11+
import 'package:ui_kit/position/gf_position.dart';
12+
import 'package:ui_kit/components/button/gf_icon_button.dart';
13+
14+
15+
import 'package:ui_kit/components/button/gf_icon_button.dart';
16+
17+
18+
19+
class Cards extends StatefulWidget {
20+
@override
21+
_CardsState createState() => _CardsState();
22+
}
23+
24+
class _CardsState extends State<Cards> {
25+
@override
26+
Widget build(BuildContext context) {
27+
return Scaffold(
28+
body: Layout(
29+
body: ListView(
30+
children: <Widget>[
31+
Text('Cards', style: hintStyleTextblackbolder(),),
32+
SizedBox(
33+
height: 20,
34+
),
35+
Text('A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc.', style: hintStyleTextblackdull(),),
36+
SizedBox(
37+
height: 30,
38+
),
39+
Text('Basic Card', style: hintStyleTextblackbold(),),
40+
GFCard(
41+
boxFit: BoxFit.cover,
42+
43+
colorFilter: new ColorFilter.mode(
44+
Colors.grey.withOpacity(0.67), BlendMode.darken),
45+
image:Image.network('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
46+
// imageOverlay: AssetImage("lib/assets/food.jpeg"),
47+
titlePosition: GFPosition.end,
48+
title: GFListTile(
49+
avatar: GFAvatar(
50+
child: Icon(Icons.insert_emoticon)
51+
),
52+
title: Text(
53+
'title',
54+
style: TextStyle(color: Colors.grey),
55+
),
56+
subTitle: Text(
57+
'subtitle',
58+
style: TextStyle(color: Colors.grey),
59+
),
60+
icon: GFIconButton(
61+
onPressed: null,
62+
icon: Icon(Icons.favorite_border),
63+
type: GFType.transparent,
64+
),
65+
),
66+
content: Text(
67+
"Flutter "
68+
"Flutter is Google's mobile UI framework for crafting"
69+
" high-quality native interfaces on iOS and Android in "
70+
"Flutter ",
71+
style: TextStyle(color: Colors.grey),
72+
),
73+
74+
),
75+
76+
77+
78+
Text('Basic Card 1', style: hintStyleTextblackbold(),),
79+
GFCard(
80+
boxFit: BoxFit.cover,
81+
colorFilter: new ColorFilter.mode(
82+
Colors.black.withOpacity(0.67), BlendMode.darken),
83+
image:Image.network('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
84+
// imageOverlay: AssetImage("lib/assets/food.jpeg"),
85+
titlePosition: GFPosition.end,
86+
title: GFListTile(
87+
avatar: GFAvatar(
88+
child: Icon(Icons.insert_emoticon)
89+
),
90+
title: Text(
91+
'title',
92+
style: TextStyle(color: Colors.grey),
93+
),
94+
subTitle: Text(
95+
'subtitle',
96+
style: TextStyle(color: Colors.grey),
97+
),
98+
icon: GFIconButton(
99+
onPressed: null,
100+
icon: Icon(Icons.favorite_border),
101+
type: GFType.transparent,
102+
),
103+
),
104+
content: Text(
105+
"Flutter "
106+
"Flutter is Google's mobile UI framework for crafting"
107+
" high-quality native interfaces on iOS and Android in "
108+
"Flutter ",
109+
style: TextStyle(color: Colors.grey),
110+
),
111+
112+
),
113+
Text('Basic Card 2', style: hintStyleTextblackbold(),),
114+
GFCard(
115+
boxFit: BoxFit.cover,
116+
colorFilter: new ColorFilter.mode(
117+
Colors.black.withOpacity(0.67), BlendMode.darken),
118+
image:Image.network('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
119+
// imageOverlay: AssetImage("lib/assets/food.jpeg"),
120+
titlePosition: GFPosition.end,
121+
title: GFListTile(
122+
avatar: GFAvatar(
123+
child: Icon(Icons.insert_emoticon)
124+
),
125+
title: Text(
126+
'title',
127+
style: TextStyle(color: Colors.grey),
128+
),
129+
subTitle: Text(
130+
'subtitle',
131+
style: TextStyle(color: Colors.grey),
132+
),
133+
icon: GFIconButton(
134+
onPressed: null,
135+
icon: Icon(Icons.favorite_border),
136+
type: GFType.transparent,
137+
),
138+
),
139+
content: Text(
140+
"Flutter "
141+
"Flutter is Google's mobile UI framework for crafting"
142+
" high-quality native interfaces on iOS and Android in "
143+
"Flutter ",
144+
style: TextStyle(color: Colors.grey),
145+
),
146+
buttonBar: GFButtonBar(
147+
mainAxisSize: MainAxisSize.min,
148+
children: <Widget>[
149+
GFButton(
150+
onPressed: null,
151+
child: Text("favorite"),
152+
icon: Icon(Icons.favorite_border),
153+
type: GFType.transparent,
154+
),
155+
GFButton(
156+
onPressed: null,
157+
child: Text("share"),
158+
icon: Icon(Icons.share),
159+
type: GFType.outline,
160+
),
161+
],
162+
),
163+
),
164+
Text('Basic Card 3', style: hintStyleTextblackbold(),),
165+
GFCard(
166+
boxFit: BoxFit.cover,
167+
colorFilter: new ColorFilter.mode(
168+
Colors.black.withOpacity(0.67), BlendMode.darken),
169+
image:Image.network('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
170+
// imageOverlay: AssetImage("lib/assets/food.jpeg"),
171+
titlePosition: GFPosition.end,
172+
title: GFListTile(
173+
174+
title: Text(
175+
'title',
176+
style: TextStyle(color: Colors.grey),
177+
),
178+
subTitle: Text(
179+
'subtitle',
180+
style: TextStyle(color: Colors.grey),
181+
),
182+
icon: GFAvatar(
183+
child: Icon(Icons.insert_emoticon)
184+
)
185+
),
186+
content: Text(
187+
"Flutter "
188+
"Flutter is Google's mobile UI framework for crafting"
189+
" high-quality native interfaces on iOS and Android in "
190+
"Flutter ",
191+
style: TextStyle(color: Colors.grey),
192+
),
193+
buttonBar: GFButtonBar(
194+
mainAxisSize: MainAxisSize.min,
195+
children: <Widget>[
196+
GFButton(
197+
onPressed: null,
198+
child: Text("favorite"),
199+
// icon: Icon(Icons.favorite_border),
200+
type: GFType.transparent,
201+
),
202+
GFButton(
203+
onPressed: null,
204+
child: Text("share"),
205+
// icon: Icon(Icons.share),
206+
type: GFType.outline,
207+
),
208+
GFButton(
209+
onPressed: null,
210+
child: Text("send", style: TextStyle(color: getGFColor(GFColor.white)),),
211+
// icon: Icon(Icons.share),
212+
type: GFType.solid,
213+
),
214+
],
215+
),
216+
),
217+
Text('Basic Card 4', style: hintStyleTextblackbold(),),
218+
GFCard(
219+
220+
title: GFListTile(
221+
222+
title: Text(
223+
'title',
224+
style: TextStyle(color: Colors.grey),
225+
),
226+
subTitle: Text(
227+
'subtitle',
228+
style: TextStyle(color: Colors.grey),
229+
),
230+
icon: GFAvatar(
231+
child: Icon(Icons.insert_emoticon)
232+
)
233+
),
234+
content: Text(
235+
"Flutter "
236+
"Flutter is Google's mobile UI framework for crafting"
237+
" high-quality native interfaces on iOS and Android in "
238+
"Flutter ",
239+
style: TextStyle(color: Colors.grey),
240+
),
241+
buttonBar: GFButtonBar(
242+
243+
alignment: MainAxisAlignment.spaceBetween,
244+
children: <Widget>[
245+
GFButton(
246+
onPressed: null,
247+
child: Text("favorite"),
248+
icon: Icon(Icons.favorite_border),
249+
type: GFType.transparent,
250+
),
251+
GFButton(
252+
onPressed: null,
253+
child: Text("share"),
254+
icon: Icon(Icons.share),
255+
type: GFType.outline,
256+
),
257+
GFIconButton(icon: Icon(Icons.send), onPressed: null)
258+
],
259+
),
260+
),
261+
Text('Basic Card 5', style: hintStyleTextblackbold(),),
262+
GFCard(
263+
boxFit: BoxFit.cover,
264+
colorFilter: new ColorFilter.mode(
265+
Colors.black.withOpacity(0.67), BlendMode.darken),
266+
// image:Image.network('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
267+
imageOverlay: NetworkImage('https://cdn.pixabay.com/photo/2016/12/15/03/27/cocoa-1908020_960_720.jpg'),
268+
// titlePosition: GFPosition.end,
269+
title: GFListTile(
270+
271+
title: Text(
272+
'title',
273+
style: TextStyle(color: Colors.grey),
274+
),
275+
subTitle: Text(
276+
'subtitle',
277+
style: TextStyle(color: Colors.grey),
278+
),
279+
icon: GFAvatar(
280+
child: Icon(Icons.insert_emoticon)
281+
)
282+
),
283+
content: Text(
284+
"Flutter "
285+
"Flutter is Google's mobile UI framework for crafting"
286+
" high-quality native interfaces on iOS and Android in "
287+
"Flutter ",
288+
style: TextStyle(color: Colors.grey),
289+
),
290+
291+
),
292+
],
293+
),
294+
),
295+
);
296+
}
297+
}

‎gf_web/lib/screens/layout/routes.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:gf_web/screens/buttons/shadow-buttons.dart';
88
import 'package:gf_web/screens/buttons/icon-buttons.dart';
99
import 'package:gf_web/screens/buttons/social-buttons.dart';
1010
import 'package:gf_web/screens/badges/badges.dart';
11+
import 'package:gf_web/screens/cards/cards.dart';
1112

1213

1314

@@ -26,8 +27,7 @@ final routes =
2627
'/gf-buttons/social-button': (context) => SocialButtons(),
2728

2829
'/gf-badges/badges': (context) => Badges(),
29-
30-
30+
'/gf-cards/cards': (context) => Cards(),
3131

3232

3333
// '/third': (context) => ThirdScreen(),

‎gf_web/lib/screens/layout/sidebar.dart‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,14 @@ margin: EdgeInsets.only(right: 10,),
159159
SizedBox(
160160
height: 20,
161161
),
162-
Text('GF Card', style: hintStyleTextblackdull()),
163-
SizedBox(
162+
GestureDetector(
163+
onTap: (){
164+
Navigator.pushNamed(context, '/gf-cards/cards');
165+
},
166+
child: Text('GF Cards',style: hintStyleTextblackdull(),),
167+
168+
),
169+
SizedBox(
164170
height: 20,
165171
),
166172
Text('GF Slider', style: hintStyleTextblackdull()),

0 commit comments

Comments
 (0)