Skip to content

Commit 45129cf

Browse files
pietechsolutionpietechsolution
authored
Merge pull request #35 from sipra-acharya/sipra
Web app Demo components.
2 parents a197ba9 + 5b47b11 commit 45129cf

File tree

13 files changed

+3750
-28
lines changed

13 files changed

+3750
-28
lines changed

‎gf_web/lib/screens/badges/badges.dart‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
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/size/gf_size.dart';
9+
import 'package:flutter_svg/flutter_svg.dart';
10+
import 'package:ui_kit/shape/gf_button_shape.dart';
11+
import 'package:ui_kit/components/typography/gf_typography.dart';
12+
import 'package:ui_kit/shape/gf_icon_button_shape.dart';
13+
import 'package:ui_kit/shape/gf_badge_shape.dart';
14+
import 'package:ui_kit/components/badge/gf_badge.dart';
15+
import 'package:ui_kit/components/badge/gf_button_badge.dart';
16+
import 'package:ui_kit/components/badge/gf_icon_badge.dart';
17+
import 'package:ui_kit/components/card/gf_card.dart';
18+
import 'package:ui_kit/components/typography/gf_typography.dart';
19+
import 'package:ui_kit/types/gf_typography_type.dart';
20+
21+
22+
23+
24+
import 'package:ui_kit/components/button/gf_icon_button.dart';
25+
26+
27+
28+
class Badges extends StatefulWidget {
29+
@override
30+
_BadgesState createState() => _BadgesState();
31+
}
32+
33+
class _BadgesState extends State<Badges> {
34+
@override
35+
Widget build(BuildContext context) {
36+
return Scaffold(
37+
body: Layout(
38+
body: ListView(
39+
children: <Widget>[
40+
Text('Badges', style: hintStyleTextblackbolder(),),
41+
SizedBox(
42+
height: 20,
43+
),
44+
Text('Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.', style: hintStyleTextblackdull(),),
45+
SizedBox(
46+
height: 30,
47+
),
48+
Text('With Buttons', style: hintStyleTextblackbold(),),
49+
GFCard(
50+
content: Column(
51+
children: <Widget>[
52+
SizedBox(
53+
height: 10,
54+
),
55+
Row(
56+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
57+
children: <Widget>[
58+
GFButtonBadge(
59+
icon: GFBadge(
60+
text: '6',
61+
shape: GFBadgeShape.pills,
62+
),
63+
onPressed: () {},
64+
text: 'Primary',
65+
),
66+
GFButtonBadge(
67+
icon: GFBadge(
68+
text: '6',
69+
shape: GFBadgeShape.pills,
70+
),
71+
onPressed: () {},
72+
text: 'Second',
73+
color: GFColor.secondary,
74+
),
75+
GFButtonBadge(
76+
icon: GFBadge(
77+
text: '6',
78+
shape: GFBadgeShape.pills,
79+
),
80+
onPressed: () {},
81+
text: 'Success',
82+
color: GFColor.success,
83+
),
84+
],
85+
),
86+
SizedBox(
87+
height: 20,
88+
),
89+
Row(
90+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
91+
children: <Widget>[
92+
GFButtonBadge(
93+
icon: GFBadge(
94+
text: '6',
95+
shape: GFBadgeShape.pills,
96+
),
97+
onPressed: () {},
98+
text: 'Warning',
99+
color: GFColor.warning,
100+
),
101+
GFButtonBadge(
102+
icon: GFBadge(
103+
text: '6',
104+
shape: GFBadgeShape.pills,
105+
),
106+
onPressed: () {},
107+
text: 'Danger',
108+
color: GFColor.danger,
109+
),
110+
GFButtonBadge(
111+
icon: GFBadge(
112+
text: '6',
113+
shape: GFBadgeShape.pills,
114+
),
115+
onPressed: () {},
116+
text: 'Info',
117+
color: GFColor.info,
118+
),
119+
],
120+
),
121+
SizedBox(
122+
height: 20,
123+
),
124+
Row(
125+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
126+
children: <Widget>[
127+
GFButtonBadge(
128+
icon: GFBadge(
129+
text: '6',
130+
shape: GFBadgeShape.pills,
131+
),
132+
onPressed: () {},
133+
text: 'Light',
134+
color: GFColor.light,
135+
),
136+
GFButtonBadge(
137+
icon: GFBadge(
138+
text: '6',
139+
shape: GFBadgeShape.pills,
140+
),
141+
onPressed: () {},
142+
text: 'Dark',
143+
textStyle: TextStyle(color: getGFColor(GFColor.white)),
144+
color: GFColor.dark,
145+
),
146+
GFButtonBadge(
147+
icon: GFBadge(
148+
text: '6',
149+
shape: GFBadgeShape.pills,
150+
),
151+
onPressed: () {},
152+
text: 'Link',
153+
color: GFColor.transparent,
154+
),
155+
],
156+
),
157+
SizedBox(
158+
height: 10,
159+
),
160+
],
161+
),
162+
),
163+
164+
165+
//icons with badges
166+
Text('Icon with Badges', style: hintStyleTextblackbold(),),
167+
GFCard(
168+
content: Column(
169+
children: <Widget>[
170+
SizedBox(
171+
height: 20,
172+
),
173+
Row(
174+
children: <Widget>[
175+
GFIconBadge(
176+
child: GFIconButton(
177+
type: GFType.transparent,
178+
onPressed: () {},
179+
icon: SvgPicture.asset(
180+
'lib/assets/icons/primary.svg',
181+
color: getGFColor(GFColor.primary),
182+
)),
183+
counterChild: GFBadge(
184+
text: '12',
185+
shape: GFBadgeShape.circle,
186+
size: GFSize.small,
187+
)),
188+
GFIconBadge(
189+
child: GFIconButton(
190+
type: GFType.transparent,
191+
onPressed: () {},
192+
icon: SvgPicture.asset(
193+
'lib/assets/icons/secondary.svg',
194+
color: getGFColor(GFColor.secondary),
195+
)),
196+
counterChild: GFBadge(
197+
text: '12',
198+
shape: GFBadgeShape.circle,
199+
size: GFSize.small,
200+
)),
201+
GFIconBadge(
202+
child: GFIconButton(
203+
type: GFType.transparent,
204+
onPressed: () {},
205+
icon: SvgPicture.asset(
206+
'lib/assets/icons/success.svg',
207+
color: getGFColor(GFColor.success),
208+
)),
209+
counterChild: GFBadge(
210+
text: '12',
211+
shape: GFBadgeShape.circle,
212+
size: GFSize.small,
213+
)),
214+
GFIconBadge(
215+
child: GFIconButton(
216+
type: GFType.transparent,
217+
onPressed: () {},
218+
icon: SvgPicture.asset(
219+
'lib/assets/icons/warning.svg',
220+
color: getGFColor(GFColor.warning),
221+
)),
222+
counterChild: GFBadge(
223+
text: '12',
224+
shape: GFBadgeShape.circle,
225+
size: GFSize.small,
226+
)),
227+
GFIconBadge(
228+
child: GFIconButton(
229+
type: GFType.transparent,
230+
onPressed: () {},
231+
icon: SvgPicture.asset(
232+
'lib/assets/icons/danger.svg',
233+
color: getGFColor(GFColor.danger),
234+
)),
235+
counterChild: GFBadge(
236+
text: '12',
237+
shape: GFBadgeShape.circle,
238+
size: GFSize.small,
239+
)),
240+
],
241+
),
242+
Row(
243+
children: <Widget>[
244+
GFIconBadge(
245+
child: GFIconButton(
246+
type: GFType.transparent,
247+
onPressed: () {},
248+
icon: SvgPicture.asset(
249+
'lib/assets/icons/info.svg',
250+
color: getGFColor(GFColor.info),
251+
)),
252+
counterChild: GFBadge(
253+
text: '12',
254+
shape: GFBadgeShape.standard,
255+
size: GFSize.small,
256+
)),
257+
GFIconBadge(
258+
child: GFIconButton(
259+
type: GFType.transparent,
260+
onPressed: () {},
261+
icon: SvgPicture.asset(
262+
'lib/assets/icons/light.svg',
263+
color: getGFColor(GFColor.light),
264+
)),
265+
counterChild: GFBadge(
266+
text: '12',
267+
shape: GFBadgeShape.square,
268+
size: GFSize.small,
269+
)),
270+
GFIconBadge(
271+
child: GFIconButton(
272+
type: GFType.transparent,
273+
onPressed: () {},
274+
icon: SvgPicture.asset(
275+
'lib/assets/icons/dark.svg',
276+
color: getGFColor(GFColor.dark),
277+
)),
278+
counterChild: GFBadge(
279+
text: '12',
280+
shape: GFBadgeShape.pills,
281+
size: GFSize.small,
282+
)),
283+
],
284+
)
285+
],
286+
),
287+
),
288+
289+
],
290+
),
291+
),
292+
);
293+
}
294+
}

0 commit comments

Comments
 (0)