Skip to content

Commit cccf26f

Browse files
deepikahrdeepikahr
committed
button bar component completed
1 parent 3e0999a commit cccf26f

5 files changed

Lines changed: 125 additions & 15 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:ui_kit/components/badge/gf_badge.dart';
88
import 'package:ui_kit/components/card/gf_card.dart';
99
import 'package:ui_kit/components/header_bar/gf_title_bar.dart';
1010
import 'package:ui_kit/components/image/gf_image_overlay.dart';
11+
import 'package:ui_kit/components/button_bar/gf_button_bar.dart';
1112
import 'package:ui_kit/types/gf_type.dart';
1213

1314
void main() => runApp(MyApp());
@@ -47,13 +48,37 @@ class _MyHomePageState extends State<MyHomePage> {
4748
crossAxisAlignment: CrossAxisAlignment.center,
4849
children: <Widget>[
4950

51+
Card(
52+
child: Column(
53+
children: <Widget>[
54+
Text("czsd"),
55+
Row(
56+
children: <Widget>[
57+
OutlineButton(onPressed: null, child: Text("dscds"), color: Colors.orange, ),
58+
FlatButton(onPressed: null, child: Text("dchbvj"))
59+
],
60+
)
61+
],
62+
),
63+
),
64+
65+
GFButtonBar(
66+
mainAxisSize: MainAxisSize.min,
67+
children: <Widget>[
68+
GFButton(onPressed: null, child: Text("like"), icon: Icon(Icons.favorite_border), type: GFType.transparent,),
69+
GFButton(onPressed: null, child: Text("comment"),),
70+
GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline,),
71+
],
72+
),
73+
5074
GFTitleBar(
5175
avatar: GFAvatar(
5276
child: Text("tb"),
5377
),
5478
title: Text('title'),
5579
subTitle: Text('subtitle'),
5680
icon: GFIconButton(
81+
type: GFType.transparent,
5782
icon: Icon(Icons.favorite_border),
5883
),
5984
),
@@ -68,10 +93,23 @@ class _MyHomePageState extends State<MyHomePage> {
6893
icon: Icon(Icons.favorite_border),
6994
type: GFType.transparent,
7095
),
96+
image: Image.asset("lib/assets/pizza.jpeg"),
97+
content: Text("Flutter "
98+
"Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "),
99+
buttonBar: GFButtonBar(
100+
mainAxisSize: MainAxisSize.min,
101+
children: <Widget>[
102+
GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ),
103+
GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ),
104+
],
105+
),
106+
71107
),
72108

73109

74110

111+
112+
75113
// GFCard(
76114
// headertype: GFAtb(),
77115
// po

‎lib/components/button/gf_button.dart‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,17 @@ class _GFButtonState extends State<GFButton> {
313313
}
314314
}
315315

316+
// Color _getFillColor() {
317+
// if (widget.highlightElevation == null || widget.highlightElevation == 0.0)
318+
// return Colors.transparent;
319+
// final Color color = widget.color ?? Theme.of(context).canvasColor;
320+
// final Tween<Color> colorTween = ColorTween(
321+
// begin: color.withAlpha(0x00),
322+
// end: color.withAlpha(0xFF),
323+
// );
324+
// return colorTween.evaluate(_fillAnimation);
325+
// }
326+
316327

317328
return Semantics(
318329
container: true,

‎lib/components/button_bar/gf_button_bar.dart‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:ui_kit/components/button/gf_button.dart';
3+
import 'package:ui_kit/components/button/gf_icon_button.dart';
4+
5+
class GFButtonBar extends StatelessWidget {
6+
7+
const GFButtonBar({
8+
Key key,
9+
this.alignment = MainAxisAlignment.end,
10+
this.mainAxisSize = MainAxisSize.max,
11+
this.children = const <Widget>[],
12+
}) : super(key: key);
13+
14+
/// How the children should be placed along the horizontal axis.
15+
final MainAxisAlignment alignment;
16+
17+
/// How much horizontal space is available. See [Row.mainAxisSize].
18+
final MainAxisSize mainAxisSize;
19+
20+
/// The buttons to arrange horizontally.
21+
/// Typically [RaisedButton] or [GFButton] or [GFIconButton] widgets.
22+
final List<Widget> children;
23+
24+
@override
25+
Widget build(BuildContext context) {
26+
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
27+
// We divide by 4.0 because we want half of the average of the left and right padding.
28+
final double paddingUnit = buttonTheme.padding.horizontal / 4.0;
29+
final Widget child = Row(
30+
mainAxisAlignment: alignment,
31+
mainAxisSize: mainAxisSize,
32+
children: children.map<Widget>((Widget child) {
33+
return Padding(
34+
padding: EdgeInsets.symmetric(horizontal: paddingUnit),
35+
child: child,
36+
);
37+
}).toList(),
38+
);
39+
switch (buttonTheme.layoutBehavior) {
40+
case ButtonBarLayoutBehavior.padded:
41+
return Padding(
42+
padding: EdgeInsets.symmetric(
43+
vertical: 2.0 * paddingUnit,
44+
horizontal: paddingUnit,
45+
),
46+
child: child,
47+
);
48+
case ButtonBarLayoutBehavior.constrained:
49+
return Container(
50+
padding: EdgeInsets.symmetric(horizontal: paddingUnit),
51+
constraints: const BoxConstraints(minHeight: 52.0),
52+
alignment: Alignment.center,
53+
child: child,
54+
);
55+
}
56+
assert(false);
57+
return null;
58+
}
59+
}

‎lib/components/card/gf_card.dart‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/cupertino.dart';
22
import 'package:flutter/material.dart';
33
import 'package:ui_kit/components/avatar/gf_avatar.dart';
4+
import 'package:ui_kit/components/button_bar/gf_button_bar.dart';
45
import 'package:ui_kit/components/header_bar/gf_title_bar.dart';
56

67
enum GFCardType { basic, social, image}
@@ -25,7 +26,8 @@ class GFCard extends StatelessWidget {
2526
this.titleTextStyle,
2627
this.content,
2728
this.image,
28-
this.icon
29+
this.icon,
30+
this.buttonBar,
2931
}) : assert(elevation == null || elevation >= 0.0),
3032
assert(borderOnForeground != null),
3133
super(key: key);
@@ -83,6 +85,9 @@ class GFCard extends StatelessWidget {
8385
/// image widget can be used
8486
final Image image;
8587

88+
/// widget can be used to define buttons bar, see [GFButtonBar]
89+
final GFButtonBar buttonBar;
90+
8691
static const double _defaultElevation = 1.0;
8792
static const Clip _defaultClipBehavior = Clip.none;
8893

@@ -116,11 +121,12 @@ class GFCard extends StatelessWidget {
116121
subTitle: subTitle,
117122
icon: icon,
118123
),
119-
// image,
120-
// Padding(
121-
// padding: padding,
122-
// child: content,
123-
// )
124+
image,
125+
Padding(
126+
padding: padding,
127+
child: content,
128+
),
129+
buttonBar,
124130
],
125131
),
126132
),

‎lib/components/header_bar/gf_title_bar.dart‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,11 @@ class GFTitleBar extends StatelessWidget {
3939
@override
4040
Widget build(BuildContext context) {
4141

42-
return Container(
43-
// margin: margin ?? const EdgeInsets.all(16.0),
44-
// padding: padding ?? const EdgeInsets.all(12.0),
45-
child: ListTile(
46-
leading: avatar,
47-
title: title,
48-
subtitle: subTitle,
49-
trailing: icon,
50-
),
42+
return ListTile(
43+
leading: avatar,
44+
title: title,
45+
subtitle: subTitle,
46+
trailing: icon,
5147
);
5248
}
5349
}

0 commit comments

Comments
 (0)