Skip to content

Commit 7906e12

Browse files
deepikahrdeepikahr
authored
Merge pull request #10 from deepikahr/card
Card
2 parents 0f018c8 + 9bd93ff commit 7906e12

3 files changed

Lines changed: 140 additions & 185 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 69 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -52,85 +52,39 @@ class _MyHomePageState extends State<MyHomePage> {
5252
crossAxisAlignment: CrossAxisAlignment.center,
5353
children: <Widget>[
5454

55-
// Card(
56-
// child: Stack(
57-
// alignment: AlignmentDirectional.center,
58-
// children: <Widget>[
59-
//// Container(
60-
////// child: new Text(
61-
////// 'Hello world',
62-
////// style: Theme.of(context).textTheme.display4
63-
////// ),
64-
//// decoration: new BoxDecoration(
65-
//// color: const Color(0xff7c94b6),
66-
//// image: new DecorationImage(
67-
//// fit: BoxFit.cover,
68-
//// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
69-
//// image: new NetworkImage(
70-
//// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
71-
//// ),
72-
//// ),
73-
//// ),
74-
//// ),
75-
// Image.network(
76-
// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
77-
// ),
78-
// Column(
79-
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
80-
// crossAxisAlignment: CrossAxisAlignment.center,
81-
// children: <Widget>[
82-
// GFTitleBar(
83-
// avatar: GFAvatar(
84-
// child: Text("tb"),
85-
// ),
86-
// title: Text('title'),
87-
// subTitle: Text('subtitle'),
88-
// icon: GFIconButton(
89-
// onPressed: null,
90-
// type: GFType.transparent,
91-
// icon: Icon(Icons.favorite_border),
92-
// ),
93-
// ),
94-
// Text("Flutter "
95-
// "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "),
96-
// GFButtonBar(
97-
// mainAxisSize: MainAxisSize.min,
98-
// children: <Widget>[
99-
// GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ),
100-
// GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ),
101-
// ],
102-
// ),
103-
//
104-
// ],
105-
// ),
106-
// ],
107-
// ),
108-
// ),
109-
//
110-
GFImageOverlay(
111-
height: 200.0,
112-
width: MediaQuery.of(context).size.width,
113-
margin: EdgeInsets.all(16.0),
114-
padding: EdgeInsets.all(16.0),
115-
child: Column(
116-
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
117-
crossAxisAlignment: CrossAxisAlignment.center,
55+
56+
GFCard(
57+
boxFit: BoxFit.cover,
58+
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken),
59+
image: Image.asset("lib/assets/pizza.jpeg"),
60+
// imageOverlay: AssetImage("lib/assets/pizza.jpeg"),
61+
titlePosition: GFPosition.end,
62+
title: GFTitleBar(
63+
avatar: GFAvatar(
64+
child: Text("tb"),
65+
),
66+
title: Text('title', style: TextStyle(color: Colors.grey),),
67+
subTitle: Text('subtitle', style: TextStyle(color: Colors.grey),),
68+
icon: GFIconButton(
69+
onPressed: null,
70+
icon: Icon(Icons.favorite_border),
71+
type: GFType.transparent,
72+
),
73+
),
74+
content: Text("Flutter "
75+
"Flutter is Google's mobile UI framework for crafting"
76+
" high-quality native interfaces on iOS and Android in "
77+
"Flutter ", style: TextStyle(color: Colors.grey), ),
78+
buttonBar: GFButtonBar(
79+
mainAxisSize: MainAxisSize.min,
11880
children: <Widget>[
119-
new Text(
120-
'Hello world', style: TextStyle(color: Colors.white),
121-
),new Text(
122-
'Hello world', style: TextStyle(color: Colors.white),
123-
),
81+
GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ),
82+
GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ),
12483
],
12584
),
126-
// color: Colors.orange,
127-
image: AssetImage("lib/assets/pizza.jpeg"),
128-
boxFit: BoxFit.cover,
129-
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
130-
borderRadius: new BorderRadius.circular(5.0),
131-
// border: Border.all(color: Colors.pink, width: 2.0),
13285
),
13386

87+
13488
// GFButtonBar(
13589
// mainAxisSize: MainAxisSize.min,
13690
// children: <Widget>[
@@ -153,33 +107,52 @@ class _MyHomePageState extends State<MyHomePage> {
153107
// ),
154108
// ),
155109

156-
GFCard(
110+
GFImageOverlay(
111+
width: MediaQuery.of(context).size.width,
157112
margin: EdgeInsets.all(16.0),
158-
// color: Colors.pink,
159-
titlePosition: GFPosition.end,
160-
avatar: GFAvatar(
161-
child: Text("tb"),
162-
),
163-
title: Text('title'),
164-
subTitle: Text('subtitle'),
165-
icon: GFIconButton(
166-
onPressed: null,
167-
icon: Icon(Icons.favorite_border),
168-
type: GFType.transparent,
169-
),
170-
// image: Image.asset("lib/assets/pizza.jpeg"),
171-
// imageOverlay: Image.asset("lib/assets/pizza.jpeg"),
172-
content: Text("Flutter "
173-
"Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "),
174-
buttonBar: GFButtonBar(
175-
mainAxisSize: MainAxisSize.min,
113+
padding: EdgeInsets.all(16.0),
114+
child: Column(
176115
children: <Widget>[
177-
GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ),
178-
GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ),
116+
new Text(
117+
'Hello world', style: TextStyle(color: Colors.white),
118+
),new Text(
119+
'Hello world', style: TextStyle(color: Colors.white),
120+
),
121+
new Text(
122+
'Hello world', style: TextStyle(color: Colors.white),
123+
),new Text(
124+
'Hello world', style: TextStyle(color: Colors.white),
125+
),
126+
new Text(
127+
'Hello world', style: TextStyle(color: Colors.white),
128+
),new Text(
129+
'Hello world', style: TextStyle(color: Colors.white),
130+
),
131+
new Text(
132+
'Hello world', style: TextStyle(color: Colors.white),
133+
),new Text(
134+
'Hello world', style: TextStyle(color: Colors.white),
135+
),
136+
new Text(
137+
'Hello world', style: TextStyle(color: Colors.white),
138+
),new Text(
139+
'Hello world', style: TextStyle(color: Colors.white),
140+
),
141+
new Text(
142+
'Hello world', style: TextStyle(color: Colors.white),
143+
),new Text(
144+
'Hello world', style: TextStyle(color: Colors.white),
145+
),
179146
],
180147
),
181-
148+
// color: Colors.orange,
149+
image: AssetImage("lib/assets/pizza.jpeg"),
150+
boxFit: BoxFit.cover,
151+
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken),
152+
borderRadius: new BorderRadius.circular(5.0),
153+
// border: Border.all(color: Colors.pink, width: 2.0),
182154
),
155+
183156
//
184157
// GFAvatar(
185158
//// radius: 40.0,

‎lib/components/card/gf_card.dart‎

Lines changed: 49 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import 'package:flutter/cupertino.dart';
22
import 'package:flutter/material.dart';
3-
import 'package:ui_kit/components/avatar/gf_avatar.dart';
43
import 'package:ui_kit/components/button_bar/gf_button_bar.dart';
54
import 'package:ui_kit/components/header_bar/gf_title_bar.dart';
65
import 'package:ui_kit/components/image/gf_image_overlay.dart';
@@ -19,19 +18,17 @@ class GFCard extends StatelessWidget {
1918
this.padding = const EdgeInsets.all(12.0),
2019
this.margin,
2120
this.clipBehavior,
22-
this.child,
2321
this.semanticContainer,
24-
this.avatar,
2522
this.title,
26-
this.subTitle,
27-
this.subTitleTextStyle,
28-
this.titleTextStyle,
2923
this.content,
3024
this.image,
31-
this.icon,
3225
this.buttonBar,
3326
this.imageOverlay,
34-
this.titlePosition
27+
this.titlePosition,
28+
this.borderRadius,
29+
this.border,
30+
this.boxFit,
31+
this.colorFilter
3532
}) : assert(elevation == null || elevation >= 0.0),
3633
assert(borderOnForeground != null),
3734
super(key: key);
@@ -55,7 +52,6 @@ class GFCard extends StatelessWidget {
5552
final Clip clipBehavior;
5653

5754
/// The empty space that surrounds the card. Defines the card's outer [Container.margin].
58-
5955
final EdgeInsetsGeometry margin;
6056

6157
/// The empty space that surrounds the card. Defines the card's outer [Container.margin]..
@@ -65,26 +61,8 @@ class GFCard extends StatelessWidget {
6561
/// a collection of individual semantic nodes.
6662
final bool semanticContainer;
6763

68-
/// The widget below this widget in the tree.
69-
final Widget child;
70-
71-
/// gfAvatar used to create rounded user profile
72-
final GFAvatar avatar;
73-
74-
/// The title to display inside the [GFTitleBar]. see [Text]
75-
final Widget title;
76-
77-
/// The subTitle to display inside the [GFTitleBar]. see [Text]
78-
final Widget subTitle;
79-
80-
/// The icon to display inside the [GFTitleBar]. see [Icon]
81-
final Widget icon;
82-
83-
/// pass [style] as title's textStyle
84-
final TextStyle titleTextStyle;
85-
86-
/// pass [style] as subTitle's textStyle
87-
final TextStyle subTitleTextStyle;
64+
/// The title to display inside the [GFTitleBar]. see [GFTitleBar]
65+
final GFTitleBar title;
8866

8967
/// widget can be used to define content
9068
final Widget content;
@@ -93,18 +71,58 @@ class GFCard extends StatelessWidget {
9371
final Image image;
9472

9573
/// overlay image [GFImageOverlay] widget can be used
96-
final Image imageOverlay;
74+
final ImageProvider imageOverlay;
9775

9876
/// widget can be used to define buttons bar, see [GFButtonBar]
9977
final GFButtonBar buttonBar;
10078

79+
/// How the image should be inscribed into the box.
80+
/// The default is [BoxFit.scaleDown] if [centerSlice] is null, and
81+
/// [BoxFit.fill] if [centerSlice] is not null.
82+
final BoxFit boxFit;
83+
84+
/// A color filter to apply to the image before painting it.
85+
final ColorFilter colorFilter;
86+
87+
/// The corners of this [GFCard] are rounded by this [BorderRadius].
88+
final BorderRadiusGeometry borderRadius;
89+
90+
/// A border to draw above the [GFCard].
91+
final Border border;
92+
10193
static const double _defaultElevation = 1.0;
10294
static const Clip _defaultClipBehavior = Clip.none;
10395

10496
@override
10597
Widget build(BuildContext context) {
10698
final CardTheme cardTheme = CardTheme.of(context);
10799

100+
Widget cardChild = Column(
101+
children: <Widget>[
102+
titlePosition == GFPosition.start ? title != null ? title : Container() : image != null ? ClipRRect(
103+
borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
104+
child: image,
105+
): Container(),
106+
titlePosition == GFPosition.start ? image != null ? image : Container(): title != null ? title : Container(),
107+
Padding(
108+
padding: padding,
109+
child: content,
110+
),
111+
buttonBar,
112+
],
113+
);
114+
115+
Widget overlayImage = GFImageOverlay(
116+
width: MediaQuery.of(context).size.width,
117+
child: cardChild,
118+
color: color ?? cardTheme.color ?? Theme.of(context).cardColor,
119+
image: imageOverlay,
120+
boxFit: boxFit,
121+
colorFilter: colorFilter,
122+
border: border,
123+
borderRadius: borderRadius ?? BorderRadius.all(Radius.circular(4.0)),
124+
);
125+
108126
return Container(
109127
margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0),
110128
child: Material(
@@ -116,42 +134,7 @@ class GFCard extends StatelessWidget {
116134
),
117135
borderOnForeground: borderOnForeground,
118136
clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior,
119-
child: Stack(
120-
children: <Widget>[
121-
// imageOverlay != null ? imageOverlay : null,
122-
Column(
123-
children: <Widget>[
124-
// imageOverlay != null ? GFTitleBar(
125-
// avatar: avatar,
126-
// title: title,
127-
// subTitle: subTitle,
128-
// icon: icon,
129-
// ) : null,
130-
titlePosition == GFPosition.start ? GFTitleBar(
131-
avatar: avatar,
132-
title: title,
133-
subTitle: subTitle,
134-
icon: icon,
135-
) : ClipRRect(
136-
borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
137-
child: image,
138-
),
139-
titlePosition == GFPosition.start ?
140-
image : GFTitleBar(
141-
avatar: avatar,
142-
title: title,
143-
subTitle: subTitle,
144-
icon: icon,
145-
),
146-
Padding(
147-
padding: padding,
148-
child: content,
149-
),
150-
buttonBar,
151-
],
152-
),
153-
],
154-
)
137+
child: imageOverlay == null ? cardChild : overlayImage
155138
),
156139
);
157140
}

0 commit comments

Comments
 (0)