Skip to content

Commit 49da838

Browse files
committed
basic card component completed
1 parent 9f3c2c3 commit 49da838

2 files changed

Lines changed: 98 additions & 65 deletions

File tree

example/lib/main.dart

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

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,
55+
// Card(
56+
// child: Stack(
57+
// alignment: AlignmentDirectional.center,
6358
// children: <Widget>[
64-
// new Text(
65-
// 'Hello world', style: TextStyle(color: Colors.white),
66-
// ),new Text(
67-
// 'Hello world', style: TextStyle(color: Colors.white),
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',
6877
// ),
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+
// ),
69103
//
104+
// ],
105+
// ),
70106
// ],
71107
// ),
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),
78108
// ),
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,
118+
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+
),
124+
],
125+
),
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),
132+
),
79133

80134
// GFButtonBar(
81135
// mainAxisSize: MainAxisSize.min,
@@ -100,6 +154,8 @@ class _MyHomePageState extends State<MyHomePage> {
100154
// ),
101155

102156
GFCard(
157+
margin: EdgeInsets.all(16.0),
158+
// color: Colors.pink,
103159
titlePosition: GFPosition.end,
104160
avatar: GFAvatar(
105161
child: Text("tb"),
@@ -111,30 +167,8 @@ class _MyHomePageState extends State<MyHomePage> {
111167
icon: Icon(Icons.favorite_border),
112168
type: GFType.transparent,
113169
),
114-
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-
),
170+
// image: Image.asset("lib/assets/pizza.jpeg"),
171+
// imageOverlay: Image.asset("lib/assets/pizza.jpeg"),
138172
content: Text("Flutter "
139173
"Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "),
140174
buttonBar: GFButtonBar(

lib/components/card/gf_card.dart

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ class GFCard extends StatelessWidget {
9393
final Image image;
9494

9595
/// overlay image [GFImageOverlay] widget can be used
96-
final GFImageOverlay imageOverlay;
96+
final Image imageOverlay;
9797

9898
/// widget can be used to define buttons bar, see [GFButtonBar]
9999
final GFButtonBar buttonBar;
@@ -105,15 +105,8 @@ class GFCard extends StatelessWidget {
105105
Widget build(BuildContext context) {
106106
final CardTheme cardTheme = CardTheme.of(context);
107107

108-
// Text gfTitle = Text(title,
109-
// style: titleTextStyle == null ? TextStyle(color: Colors.black87, fontSize: 18.0, fontWeight: FontWeight.w600) : titleTextStyle,
110-
// );
111-
// Text gfSubTitle = Text(subTitle,
112-
// style: subTitleTextStyle == null ? TextStyle(color: Colors.black45, fontSize: 14.0, fontWeight: FontWeight.w400) : subTitleTextStyle,
113-
// );
114-
115108
return Container(
116-
margin: imageOverlay == null ? margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0) : EdgeInsets.zero,
109+
margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0),
117110
child: Material(
118111
type: MaterialType.card,
119112
color: color ?? cardTheme.color ?? Theme.of(context).cardColor,
@@ -125,25 +118,31 @@ class GFCard extends StatelessWidget {
125118
clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior,
126119
child: Stack(
127120
children: <Widget>[
128-
imageOverlay != null ? imageOverlay : null,
121+
// imageOverlay != null ? imageOverlay : null,
129122
Column(
130123
children: <Widget>[
131-
// titlePosition == GFPosition.start ? GFTitleBar(
132-
// avatar: avatar,
133-
// title: title,
134-
// subTitle: subTitle,
135-
// icon: icon,
136-
// ) : ClipRRect(
137-
// borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),
138-
// child: image,
139-
// ),
140-
// titlePosition == GFPosition.start ?
141-
// image : GFTitleBar(
124+
// imageOverlay != null ? GFTitleBar(
142125
// avatar: avatar,
143126
// title: title,
144127
// subTitle: subTitle,
145128
// icon: icon,
146-
// ),
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+
),
147146
Padding(
148147
padding: padding,
149148
child: content,
@@ -152,7 +151,7 @@ class GFCard extends StatelessWidget {
152151
],
153152
),
154153
],
155-
),
154+
)
156155
),
157156
);
158157
}

0 commit comments

Comments
 (0)