Skip to content

Commit df41034

Browse files
sipra-acharyasipra-acharya
committed
social buttons added
1 parent ab12039 commit df41034

File tree

3 files changed

+325
-1
lines changed

3 files changed

+325
-1
lines changed

‎gf_web/lib/screens/buttons/social-buttons.dart‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
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+
14+
15+
16+
import 'package:ui_kit/components/button/gf_icon_button.dart';
17+
18+
19+
20+
class SocialButtons extends StatefulWidget {
21+
@override
22+
_SocialButtonsState createState() => _SocialButtonsState();
23+
}
24+
25+
class _SocialButtonsState extends State<SocialButtons> {
26+
@override
27+
Widget build(BuildContext context) {
28+
return Scaffold(
29+
body: Layout(
30+
body: ListView(
31+
children: <Widget>[
32+
Text('Social Buttons', style: hintStyleTextblackbolder(),),
33+
SizedBox(
34+
height: 20,
35+
),
36+
Text('Buttons of type social which comes in different sizes that can be used in forms, alerts, and more...', style: hintStyleTextblackdull(),),
37+
SizedBox(
38+
height: 30,
39+
),
40+
Text('Solid Buttons Full', style: hintStyleTextblackbold(),),
41+
GFCard(
42+
content: Column(
43+
mainAxisAlignment: MainAxisAlignment.start,
44+
crossAxisAlignment: CrossAxisAlignment.start,
45+
children: <Widget>[
46+
SizedBox(
47+
height: 10,
48+
),
49+
Row(
50+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
51+
children: <Widget>[
52+
Expanded(
53+
child: GFButton(
54+
buttonBoxShadow: true,
55+
color: Color(0xFF3B5998),
56+
onPressed: () {},
57+
child: Text(
58+
"FB",
59+
),
60+
icon: SvgPicture.asset('lib/assets/icons/fb.svg')),
61+
),
62+
SizedBox(
63+
width: 6,
64+
),
65+
Expanded(
66+
child: GFButton(
67+
onPressed: () {},
68+
child: Text("Twitter"),
69+
icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
70+
color: Color(0xFF00ACEE),
71+
buttonBoxShadow: true,
72+
),
73+
),
74+
SizedBox(
75+
width: 6,
76+
),
77+
Expanded(
78+
child: GFButton(
79+
onPressed: () {},
80+
child: Text(
81+
"Whatsap",
82+
),
83+
icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
84+
color: Color(0xFF25D366),
85+
buttonBoxShadow: true,
86+
),
87+
)
88+
],
89+
),
90+
SizedBox(
91+
height: 10,
92+
),
93+
Row(
94+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
95+
children: <Widget>[
96+
GFButton(
97+
onPressed: () {},
98+
child: Text(
99+
"Google +",
100+
),
101+
icon: SvgPicture.asset('lib/assets/icons/google.svg'),
102+
color: Color(0xFFDD4B39),
103+
buttonBoxShadow: true,
104+
),
105+
GFButton(
106+
onPressed: () {},
107+
child: Text(
108+
"Dribble",
109+
),
110+
icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
111+
color: Color(0xFFEA4C89),
112+
buttonBoxShadow: true,
113+
),
114+
GFButton(
115+
onPressed: () {},
116+
child: Text(
117+
"LinkedIn",
118+
),
119+
icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
120+
color: Color(0xFF0E76A8),
121+
buttonBoxShadow: true,
122+
),
123+
],
124+
),
125+
SizedBox(
126+
height: 10,
127+
),
128+
Row(
129+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
130+
children: <Widget>[
131+
GFButton(
132+
onPressed: () {},
133+
child: Text(
134+
"Youtube",
135+
),
136+
icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
137+
color: Color(0xFFC4302B),
138+
buttonBoxShadow: true,
139+
),
140+
GFButton(
141+
onPressed: () {},
142+
child: Text(
143+
"Slack",
144+
style: TextStyle(color: getGFColor(GFColor.white)),
145+
),
146+
icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
147+
color: Color(0XFF2EB67D),
148+
buttonBoxShadow: true,
149+
),
150+
GFButton(
151+
onPressed: () {},
152+
child: Text(
153+
"Pinterest",
154+
),
155+
icon: SvgPicture.asset('lib/assets/icons/pinterest.svg'),
156+
color: Color(0XFFC8232C),
157+
buttonBoxShadow: true,
158+
),
159+
],
160+
),
161+
SizedBox(
162+
height: 10,
163+
),
164+
],
165+
),
166+
),
167+
168+
//social buttons icons
169+
Text('Social Buttons Icons', style: hintStyleTextblackbold(),),
170+
GFCard(
171+
content: Column(
172+
mainAxisAlignment: MainAxisAlignment.start,
173+
crossAxisAlignment: CrossAxisAlignment.start,
174+
children: <Widget>[
175+
SizedBox(
176+
height: 10,
177+
),
178+
Row(
179+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
180+
children: <Widget>[
181+
GFIconButton(
182+
color: Color(0xFF3B5998),
183+
icon: SvgPicture.asset('lib/assets/icons/fb.svg'),
184+
onPressed: () {}),
185+
GFIconButton(
186+
color: Color(0xFF00ACEE),
187+
icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
188+
onPressed: () {}),
189+
GFIconButton(
190+
color: Color(0xFF25D366),
191+
icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
192+
onPressed: () {}),
193+
GFIconButton(
194+
color: Color(0xFFDD4B39),
195+
icon: SvgPicture.asset('lib/assets/icons/google.svg'),
196+
onPressed: () {}),
197+
GFIconButton(
198+
color: Color(0xFFEA4C89),
199+
icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
200+
onPressed: () {}),
201+
],
202+
),
203+
SizedBox(
204+
height: 20,
205+
),
206+
Row(
207+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
208+
children: <Widget>[
209+
GFIconButton(
210+
color: Color(0xFF0E76A8),
211+
icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
212+
onPressed: () {}),
213+
GFIconButton(
214+
color: Color(0xFFC4302B),
215+
icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
216+
onPressed: () {}),
217+
GFIconButton(
218+
color: Color(0XFF2EB67D),
219+
icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
220+
onPressed: () {}),
221+
GFIconButton(
222+
color: Color(0XFFC8232C),
223+
icon:
224+
SvgPicture.asset('lib/assets/icons/pinterest.svg'),
225+
onPressed: () {}),
226+
],
227+
),
228+
SizedBox(
229+
height: 10,
230+
),
231+
],
232+
),
233+
),
234+
//shadow icons
235+
Text('Floating Social Buttons', style: hintStyleTextblackbold(),),
236+
GFCard(
237+
content: Column(
238+
mainAxisAlignment: MainAxisAlignment.start,
239+
crossAxisAlignment: CrossAxisAlignment.start,
240+
children: <Widget>[
241+
SizedBox(
242+
height: 10,
243+
),
244+
Row(
245+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
246+
children: <Widget>[
247+
GFIconButton(
248+
color: Color(0xFF3B5998),
249+
shape: GFIconButtonShape.pills,
250+
icon: SvgPicture.asset('lib/assets/icons/fb.svg'),
251+
onPressed: () {}),
252+
GFIconButton(
253+
color: Color(0xFF00ACEE),
254+
shape: GFIconButtonShape.pills,
255+
icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
256+
onPressed: () {}),
257+
GFIconButton(
258+
color: Color(0xFF25D366),
259+
shape: GFIconButtonShape.pills,
260+
icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
261+
onPressed: () {}),
262+
GFIconButton(
263+
color: Color(0xFFDD4B39),
264+
shape: GFIconButtonShape.pills,
265+
icon: SvgPicture.asset('lib/assets/icons/google.svg'),
266+
onPressed: () {}),
267+
GFIconButton(
268+
color: Color(0xFFEA4C89),
269+
shape: GFIconButtonShape.pills,
270+
icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
271+
onPressed: () {}),
272+
],
273+
),
274+
SizedBox(
275+
height: 20,
276+
),
277+
Row(
278+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
279+
children: <Widget>[
280+
GFIconButton(
281+
color: Color(0xFF0E76A8),
282+
shape: GFIconButtonShape.pills,
283+
icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
284+
onPressed: () {}),
285+
GFIconButton(
286+
color: Color(0xFFC4302B),
287+
shape: GFIconButtonShape.pills,
288+
icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
289+
onPressed: () {}),
290+
GFIconButton(
291+
color: Color(0XFF2EB67D),
292+
shape: GFIconButtonShape.pills,
293+
icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
294+
onPressed: () {}),
295+
GFIconButton(
296+
color: Color(0XFFC8232C),
297+
shape: GFIconButtonShape.pills,
298+
icon:
299+
SvgPicture.asset('lib/assets/icons/pinterest.svg'),
300+
onPressed: () {}),
301+
],
302+
),
303+
SizedBox(
304+
height: 10,
305+
),
306+
],
307+
),
308+
),
309+
310+
311+
],
312+
),
313+
),
314+
);
315+
}
316+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:gf_web/screens/buttons/pills-buttons.dart';
66
import 'package:gf_web/screens/buttons/square-buttons.dart';
77
import 'package:gf_web/screens/buttons/shadow-buttons.dart';
88
import 'package:gf_web/screens/buttons/icon-buttons.dart';
9+
import 'package:gf_web/screens/buttons/social-buttons.dart';
910

1011

1112

@@ -21,6 +22,8 @@ final routes =
2122
'/gf-buttons/square-button': (context) => SquareButtons(),
2223
'/gf-buttons/shadow-button': (context) => ShadowButtons(),
2324
'/gf-buttons/icon-button': (context) => IconButtons(),
25+
'/gf-buttons/social-button': (context) => SocialButtons(),
26+
2427

2528

2629

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,12 @@ margin: EdgeInsets.only(right: 10,),
125125
},
126126
child: Text('Icon Buttons'),
127127
),
128-
Text('Social Buttons')
128+
GestureDetector(
129+
onTap: (){
130+
Navigator.pushNamed(context, '/gf-buttons/social-button');
131+
},
132+
child: Text('Social Buttons'),
133+
),
129134
],
130135
),
131136
),

0 commit comments

Comments
 (0)