Skip to content

Commit f110c56

Browse files
deepikahrdeepikahr
authored
Merge pull request #7 from ionicfirebaseapp/badge
Badge
2 parents 8ce25e8 + cb33d71 commit f110c56

5 files changed

Lines changed: 188 additions & 93 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: 73 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -333,83 +333,79 @@ class _GFButtonState extends State<GFButton> {
333333
borderRadius: BorderRadius.circular(50.0), side: shapeBorder);
334334
}
335335

336-
return Semantics(
337-
container: true,
338-
button: true,
339-
enabled: widget.enabled,
340-
child: _InputPadding(
341-
minSize: minSize,
342-
child: Focus(
343-
focusNode: widget.focusNode,
344-
onFocusChange: _handleFocusedChanged,
345-
autofocus: widget.autofocus,
346-
child: Container(
347-
constraints: this.icon == null
348-
? BoxConstraints(minHeight: 26.0, minWidth: 88.0)
349-
: BoxConstraints(minHeight: 26.0, minWidth: 98.0),
350-
decoration: BoxDecoration(
351-
borderRadius: widget.shape == GFShape.pills
352-
? BorderRadius.circular(50.0)
353-
: widget.shape == GFShape.standard
354-
? BorderRadius.circular(5.0)
355-
: BorderRadius.zero,
356-
boxShadow: [
357-
widget.boxShadow == null && widget.buttonBoxShadow == true
358-
? BoxShadow(
359-
color: this.color.withOpacity(0.4),
360-
blurRadius: 1.5,
361-
spreadRadius: 2.0,
362-
offset: Offset.zero,
363-
)
364-
: widget.boxShadow != null
365-
? widget.boxShadow
366-
: BoxShadow(
367-
color: Theme.of(context).canvasColor,
368-
blurRadius: 0.0,
369-
spreadRadius: 0.0,
370-
offset: Offset.zero,
371-
)
372-
]),
373-
child: Material(
374-
textStyle: widget.textStyle == null
375-
? TextStyle(color: this.textColor, fontSize: 14)
376-
: widget.textStyle,
377-
shape: widget.type == GFType.transparent
378-
? null
379-
: widget.borderShape == null ? shape : widget.borderShape,
380-
color: widget.type != GFType.outline || widget.type == null
381-
? this.color
382-
: Theme.of(context).canvasColor,
383-
type: widget.type == GFType.transparent
384-
? MaterialType.transparency
385-
: MaterialType.button,
386-
animationDuration: widget.animationDuration,
387-
clipBehavior: widget.clipBehavior,
388-
child: InkWell(
389-
onHighlightChanged: _handleHighlightChanged,
390-
splashColor: widget.splashColor,
391-
highlightColor: widget.highlightColor,
392-
focusColor: widget.focusColor,
393-
hoverColor: widget.hoverColor,
394-
onHover: _handleHoveredChanged,
395-
onTap: widget.onPressed,
396-
customBorder:
397-
widget.borderShape == null ? shape : widget.borderShape,
398-
child: IconTheme.merge(
399-
data: IconThemeData(color: effectiveTextColor),
400-
child: Container(
401-
height: widget.blockButton == true
402-
? BLOCK
403-
: widget.fullWidthButton == true ? BLOCK : this.size,
404-
width: buttonWidth(),
405-
padding: widget.padding,
406-
child: Center(
407-
widthFactor: 1.0,
408-
heightFactor: 1.0,
409-
child: this.icon != null &&
410-
(this.position == GFPosition.start ||
411-
this.position == null)
412-
? Row(
336+
// Color _getFillColor() {
337+
// if (widget.highlightElevation == null || widget.highlightElevation == 0.0)
338+
// return Colors.transparent;
339+
// final Color color = widget.color ?? Theme.of(context).canvasColor;
340+
// final Tween<Color> colorTween = ColorTween(
341+
// begin: color.withAlpha(0x00),
342+
// end: color.withAlpha(0xFF),
343+
// );
344+
// return colorTween.evaluate(_fillAnimation);
345+
// }
346+
347+
348+
return Semantics(
349+
container: true,
350+
button: true,
351+
enabled: widget.enabled,
352+
child: _InputPadding(
353+
minSize: minSize,
354+
child: Focus(
355+
focusNode: widget.focusNode,
356+
onFocusChange: _handleFocusedChanged,
357+
autofocus: widget.autofocus,
358+
child: Container(
359+
constraints: this.icon == null ? BoxConstraints(minHeight: 26.0, minWidth: 88.0) :
360+
BoxConstraints(minHeight: 26.0, minWidth: 98.0),
361+
decoration: BoxDecoration(
362+
borderRadius: widget.shape == GFShape.pills ? BorderRadius.circular(50.0) :
363+
widget.shape == GFShape.standard ? BorderRadius.circular(5.0) : BorderRadius.zero,
364+
boxShadow: [
365+
widget.boxShadow == null && widget.buttonBoxShadow == true ? BoxShadow(
366+
color: this.color.withOpacity(0.4),
367+
blurRadius: 1.5,
368+
spreadRadius: 2.0,
369+
offset: Offset.zero,
370+
) :
371+
widget.boxShadow != null ? widget.boxShadow :
372+
BoxShadow(
373+
color: Theme.of(context).canvasColor,
374+
blurRadius: 0.0,
375+
spreadRadius: 0.0,
376+
offset: Offset.zero,
377+
)
378+
]
379+
),
380+
child: Material(
381+
textStyle: widget.textStyle == null ? TextStyle(color: this.textColor, fontSize: 14) : widget.textStyle,
382+
shape: widget.type == GFType.transparent ? null : widget.borderShape== null ? shape : widget.borderShape,
383+
color: widget.type != GFType.outline || widget.type == null ? this.color : Theme.of(context).canvasColor,
384+
type: widget.type == GFType.transparent ? MaterialType.transparency : MaterialType.button,
385+
animationDuration: widget.animationDuration,
386+
clipBehavior: widget.clipBehavior,
387+
child: InkWell(
388+
onHighlightChanged: _handleHighlightChanged,
389+
splashColor: widget.splashColor,
390+
highlightColor: widget.highlightColor,
391+
focusColor: widget.focusColor,
392+
hoverColor: widget.hoverColor,
393+
onHover: _handleHoveredChanged,
394+
onTap: widget.onPressed,
395+
customBorder: widget.borderShape == null ? shape : widget.borderShape,
396+
child: IconTheme.merge(
397+
data: IconThemeData(color: effectiveTextColor),
398+
child: Container(
399+
height: widget.blockButton == true ? BLOCK
400+
: widget.fullWidthButton == true ? BLOCK
401+
: this.size,
402+
width: buttonWidth(),
403+
padding: widget.padding,
404+
child: Center(
405+
widthFactor: 1.0,
406+
heightFactor: 1.0,
407+
child: this.icon != null && (this.position == GFPosition.start || this.position == null)?
408+
Row(
413409
mainAxisSize: MainAxisSize.min,
414410
children: <Widget>[
415411
this.icon,

‎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: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,11 @@ class GFTitleBar extends StatelessWidget {
3737

3838
@override
3939
Widget build(BuildContext context) {
40-
return Container(
41-
// margin: margin ?? const EdgeInsets.all(16.0),
42-
// padding: padding ?? const EdgeInsets.all(12.0),
43-
child: ListTile(
44-
leading: avatar,
45-
title: title,
46-
subtitle: subTitle,
47-
trailing: icon,
48-
),
40+
return ListTile(
41+
leading: avatar,
42+
title: title,
43+
subtitle: subTitle,
44+
trailing: icon,
4945
);
5046
}
51-
}
47+
}

0 commit comments

Comments
 (0)