Skip to content

Commit 9f3c2c3

Browse files
committed
overlay image completed
1 parent f79ce3e commit 9f3c2c3

6 files changed

Lines changed: 264 additions & 204 deletions

File tree

example/lib/main.dart

Lines changed: 170 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import 'package:flutter/cupertino.dart';
12
import 'package:flutter/material.dart';
3+
import 'package:flutter/painting.dart';
24
import 'package:ui_kit/components/button/gf_button.dart';
35
import 'package:ui_kit/components/button/gf_icon_button.dart';
46
import 'package:ui_kit/components/badge/gf_button_badge.dart';
@@ -7,9 +9,11 @@ import 'package:ui_kit/components/avatar/gf_avatar.dart';
79
import 'package:ui_kit/components/badge/gf_badge.dart';
810
import 'package:ui_kit/components/card/gf_card.dart';
911
import 'package:ui_kit/components/header_bar/gf_title_bar.dart';
10-
import 'package:ui_kit/components/image/gf_image_overlay.dart';
1112
import 'package:ui_kit/components/button_bar/gf_button_bar.dart';
13+
import 'package:ui_kit/position/gf_position.dart';
1214
import 'package:ui_kit/types/gf_type.dart';
15+
import 'package:ui_kit/components/image/gf_image_overlay.dart';
16+
import 'package:ui_kit/shape/gf_shape.dart';
1317

1418
void main() => runApp(MyApp());
1519

@@ -48,52 +52,89 @@ class _MyHomePageState extends State<MyHomePage> {
4852
crossAxisAlignment: CrossAxisAlignment.center,
4953
children: <Widget>[
5054

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-
),
55+
// GFImageOverlay(
56+
// height: 200.0,
57+
// width: MediaQuery.of(context).size.width*0.8,
58+
//// margin: EdgeInsets.all(16.0),
59+
//// padding: EdgeInsets.all(16.0),
60+
// child: Column(
61+
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
62+
// crossAxisAlignment: CrossAxisAlignment.center,
63+
// children: <Widget>[
64+
// new Text(
65+
// 'Hello world', style: TextStyle(color: Colors.white),
66+
// ),new Text(
67+
// 'Hello world', style: TextStyle(color: Colors.white),
68+
// ),
69+
//
70+
// ],
71+
// ),
72+
//// color: Colors.orange,
73+
// image: AssetImage("lib/assets/pizza.jpeg"),
74+
// boxFit: BoxFit.cover,
75+
// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
76+
// borderRadius: new BorderRadius.circular(5.0),
77+
//// border: Border.all(color: Colors.pink, width: 2.0),
78+
// ),
7379

74-
GFTitleBar(
75-
avatar: GFAvatar(
76-
child: Text("tb"),
77-
),
78-
title: Text('title'),
79-
subTitle: Text('subtitle'),
80-
icon: GFIconButton(
81-
type: GFType.transparent,
82-
icon: Icon(Icons.favorite_border),
83-
),
84-
),
80+
// GFButtonBar(
81+
// mainAxisSize: MainAxisSize.min,
82+
// children: <Widget>[
83+
// GFButton(onPressed: null, child: Text("like"), icon: Icon(Icons.favorite_border), type: GFType.transparent,),
84+
// GFButton(onPressed: null, child: Text("comment"),),
85+
// GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline,),
86+
// ],
87+
// ),
88+
//
89+
// GFTitleBar(
90+
// avatar: GFAvatar(
91+
// child: Text("tb"),
92+
// ),
93+
// title: Text('title'),
94+
// subTitle: Text('subtitle'),
95+
// icon: GFIconButton(
96+
// onPressed: null,
97+
// type: GFType.transparent,
98+
// icon: Icon(Icons.favorite_border),
99+
// ),
100+
// ),
85101

86102
GFCard(
103+
titlePosition: GFPosition.end,
87104
avatar: GFAvatar(
88105
child: Text("tb"),
89106
),
90107
title: Text('title'),
91108
subTitle: Text('subtitle'),
92109
icon: GFIconButton(
110+
onPressed: null,
93111
icon: Icon(Icons.favorite_border),
94112
type: GFType.transparent,
95113
),
96114
image: Image.asset("lib/assets/pizza.jpeg"),
115+
imageOverlay: GFImageOverlay(
116+
height: 200.0,
117+
width: MediaQuery.of(context).size.width,
118+
margin: EdgeInsets.all(16.0),
119+
// padding: EdgeInsets.all(16.0),
120+
// child: Column(
121+
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
122+
// crossAxisAlignment: CrossAxisAlignment.center,
123+
// children: <Widget>[
124+
// new Text(
125+
// 'Hello world', style: TextStyle(color: Colors.white),
126+
// ),new Text(
127+
// 'Hello world', style: TextStyle(color: Colors.white),
128+
// ),
129+
// ],
130+
// ),
131+
// color: Colors.orange,
132+
image: AssetImage("lib/assets/pizza.jpeg"),
133+
boxFit: BoxFit.cover,
134+
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
135+
borderRadius: new BorderRadius.circular(5.0),
136+
// border: Border.all(color: Colors.pink, width: 2.0),
137+
),
97138
content: Text("Flutter "
98139
"Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "),
99140
buttonBar: GFButtonBar(
@@ -105,124 +146,104 @@ class _MyHomePageState extends State<MyHomePage> {
105146
),
106147

107148
),
108-
109-
110-
111-
112-
113-
// GFCard(
114-
// headertype: GFAtb(),
115-
// po
116-
// image
117-
// overlaytext
118-
// content: Text("content"),
119-
// buttonbar: gfbb()
120-
// ),
121149
//
122-
// gfbb(
123-
// children[
124-
//
125-
// ]
126-
// )
127-
// GFimageoverlay()
128-
129-
GFAvatar(
130-
// radius: 20.0,
131-
child: Text("de"),
132-
backgroundColor: Colors.pink,
133-
// backgroundImage: ,
134-
// foregroundColor: Colors.deepOrangeAccent,
135-
// shape: GFShape.standard,
136-
// size: GFSize.medium,
137-
// borderRadius: BorderRadius.circular(20.0),
138-
),
139-
GFIconBadges(
140-
onPressed: null,
141-
child: GFIconButton(
142-
onPressed: null,
143-
icon: Icon(Icons.ac_unit),
144-
),
145-
counterChild: GFBadge(
146-
text: '12',
147-
// color: GFColor.dark,
148-
// shape: GFShape.circle,
149-
// size: GFSize.small,
150-
// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
151-
// textColor: GFColor.white,
152-
// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
153-
// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
154-
),
155-
),
156-
GFIconButton(
157-
onPressed: null,
158-
icon: Icon(Icons.ac_unit),
159-
// iconSize: 12.0,
160-
// type: GFType.solid,
161-
// shape: GFShape.pills,
162-
// size: GFSize.large,
163-
// buttonBoxShadow: true,
164-
// color: GFColor.primary,
165-
// boxShadow: BoxShadow(
166-
// color: Colors.pink,
167-
// blurRadius: 2.0,
168-
// spreadRadius: 1.0,
169-
// offset: Offset.zero,
150+
// GFAvatar(
151+
//// radius: 40.0,
152+
// child: Text("de"),
153+
// backgroundColor: Colors.pink,
154+
//// backgroundImage: ,
155+
//// foregroundColor: Colors.deepOrangeAccent,
156+
//// shape: GFShape.square,
157+
//// size: GFSize.medium,
158+
//// borderRadius: BorderRadius.circular(20.0),
159+
// ),
160+
// GFIconBadges(
161+
// onPressed: null,
162+
// child: GFIconButton(
163+
// onPressed: null,
164+
// icon: Icon(Icons.ac_unit),
170165
// ),
171-
// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
172-
// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
173-
),
174-
GFButtonBadge(
175-
onPressed: null,
176-
// position: GFIconPosition.start,
177-
// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
178-
// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
179-
text: 'goodies',
180-
// color: GFColor.danger,
181-
// shape: GFShape.pills,
182-
// type: GFType.outline,
183-
// size: GFSize.small,
184-
counterChild: GFBadge(
185-
child: Text("12"),
186-
// color: GFColor.dark,
187-
// shape: GFShape.circle,
188-
// size: GFSize.small,
189-
// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
190-
// textColor: GFColor.white,
191-
// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
192-
),
193-
),
194-
GFBadge(
195-
text: '12',
196-
// color: GFColor.dark,
197-
// shape: GFShape.circle,
198-
// size: GFSize.small,
199-
// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
200-
// textColor: GFColor.white,
201-
// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
202-
),
203-
GFButton(
204-
// type: GFType.solid,
205-
// shape: GFShape.pills,
206-
text: 'goodies',
207-
onPressed: () {},
208-
// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
209-
// size: GFSize.large,
210-
// buttonBoxShadow: true,
211-
// blockButton: true,
212-
// fullWidthButton: true,
213-
// color: GFColor.primary,
214-
// textColor: GFColor.secondary,
215-
// icon: Icon(Icons.error, color: Colors.white,),
216-
// position: GFIconPosition.start,
217-
// boxShadow: BoxShadow(
218-
// color: Colors.pink,
219-
// blurRadius: 2.0,
220-
// spreadRadius: 1.0,
221-
// offset: Offset.zero,
166+
// counterChild: GFBadge(
167+
// text: '12',
168+
//// color: GFColor.dark,
169+
//// shape: GFShape.circle,
170+
//// size: GFSize.small,
171+
//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
172+
//// textColor: GFColor.white,
173+
//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
174+
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.orange, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
222175
// ),
223-
// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
224-
// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
225-
),
176+
// ),
177+
// GFIconButton(
178+
// onPressed: null,
179+
// icon: Icon(Icons.ac_unit),
180+
//// iconSize: 12.0,
181+
//// type: GFType.solid,
182+
//// shape: GFShape.pills,
183+
//// size: GFSize.large,
184+
//// buttonBoxShadow: true,
185+
//// color: GFColor.primary,
186+
//// boxShadow: BoxShadow(
187+
//// color: Colors.pink,
188+
//// blurRadius: 2.0,
189+
//// spreadRadius: 1.0,
190+
//// offset: Offset.zero,
191+
//// ),
192+
//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
193+
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
194+
// ),
195+
// GFButtonBadge(
196+
// onPressed: null,
197+
//// position: GFIconPosition.start,
198+
//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
199+
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
200+
// text: 'goodies',
201+
//// color: GFColor.danger,
202+
//// shape: GFShape.pills,
203+
//// type: GFType.outline,
204+
//// size: GFSize.small,
205+
// counterChild: GFBadge(
206+
// child: Text("12"),
207+
//// color: GFColor.dark,
208+
//// shape: GFShape.circle,
209+
//// size: GFSize.small,
210+
//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
211+
//// textColor: GFColor.white,
212+
//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
213+
// ),
214+
// ),
215+
// GFBadge(
216+
// text: '12',
217+
//// color: GFColor.dark,
218+
//// shape: GFShape.circle,
219+
//// size: GFSize.small,
220+
//// border: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
221+
//// textColor: GFColor.white,
222+
//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
223+
// ),
224+
// GFButton(
225+
//// type: GFType.solid,
226+
//// shape: GFShape.pills,
227+
// text: 'goodies',
228+
// onPressed: () {},
229+
//// textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 8.0),
230+
//// size: GFSize.large,
231+
//// buttonBoxShadow: true,
232+
//// blockButton: true,
233+
//// fullWidthButton: true,
234+
//// color: GFColor.primary,
235+
//// textColor: GFColor.secondary,
236+
//// icon: Icon(Icons.error, color: Colors.white,),
237+
//// position: GFIconPosition.start,
238+
//// boxShadow: BoxShadow(
239+
//// color: Colors.pink,
240+
//// blurRadius: 2.0,
241+
//// spreadRadius: 1.0,
242+
//// offset: Offset.zero,
243+
//// ),
244+
//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
245+
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
246+
// ),
226247
],
227248
),
228249
)

lib/components/badge/gf_badge.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class GFBadge extends StatefulWidget {
4242
this.size = GFSize.medium,
4343
this.border,
4444
this.text,
45-
@required this.child,
45+
this.child,
4646
}) : assert(shape != null, 'Counter shape can not be null'),
4747
super(key: key);
4848

lib/components/button/gf_button.dart

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -333,17 +333,6 @@ class _GFButtonState extends State<GFButton> {
333333
borderRadius: BorderRadius.circular(50.0), side: shapeBorder);
334334
}
335335

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-
347336

348337
return Semantics(
349338
container: true,

0 commit comments

Comments
 (0)