From b1d693986c8268e57026dc875ce9b56ae532b0a5 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 23 Dec 2019 16:24:12 +0530 Subject: [PATCH 1/4] image overlay in card added --- example/lib/main.dart | 161 +++++++++++++------------------ lib/components/card/gf_card.dart | 55 +++++------ 2 files changed, 88 insertions(+), 128 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 41d9a985..3d7c49fa 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -52,85 +52,37 @@ class _MyHomePageState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ -// Card( -// child: Stack( -// alignment: AlignmentDirectional.center, -// children: [ -//// Container( -////// child: new Text( -////// 'Hello world', -////// style: Theme.of(context).textTheme.display4 -////// ), -//// decoration: new BoxDecoration( -//// color: const Color(0xff7c94b6), -//// image: new DecorationImage( -//// fit: BoxFit.cover, -//// colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop), -//// image: new NetworkImage( -//// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg', -//// ), -//// ), -//// ), -//// ), -// Image.network( -// 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg', -// ), -// Column( -// mainAxisAlignment: MainAxisAlignment.spaceEvenly, -// crossAxisAlignment: CrossAxisAlignment.center, -// children: [ -// GFTitleBar( -// avatar: GFAvatar( -// child: Text("tb"), -// ), -// title: Text('title'), -// subTitle: Text('subtitle'), -// icon: GFIconButton( -// onPressed: null, -// type: GFType.transparent, -// icon: Icon(Icons.favorite_border), -// ), -// ), -// Text("Flutter " -// "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "), -// GFButtonBar( -// mainAxisSize: MainAxisSize.min, -// children: [ -// GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ), -// GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ), -// ], -// ), -// -// ], -// ), -// ], -// ), -// ), -// - GFImageOverlay( - height: 200.0, - width: MediaQuery.of(context).size.width, + + + GFCard( margin: EdgeInsets.all(16.0), - padding: EdgeInsets.all(16.0), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - crossAxisAlignment: CrossAxisAlignment.center, +// color: Colors.pink, + titlePosition: GFPosition.end, + avatar: GFAvatar( + child: Text("tb"), + ), + title: Text('title', style: TextStyle(color: Colors.grey),), + subTitle: Text('subtitle', style: TextStyle(color: Colors.grey),), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ), + image: Image.asset("lib/assets/pizza.jpeg"), + imageOverlay: Image.asset("lib/assets/pizza.jpeg"), + content: Text("Flutter " + "Flutter is Google's mobile UI framework for crafting" + " high-quality native interfaces on iOS and Android in ", style: TextStyle(color: Colors.grey), ), + buttonBar: GFButtonBar( + mainAxisSize: MainAxisSize.min, children: [ - new Text( - 'Hello world', style: TextStyle(color: Colors.white), - ),new Text( - 'Hello world', style: TextStyle(color: Colors.white), - ), + GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ), + GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ), ], ), -// color: Colors.orange, - image: AssetImage("lib/assets/pizza.jpeg"), - boxFit: BoxFit.cover, - colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), - borderRadius: new BorderRadius.circular(5.0), -// border: Border.all(color: Colors.pink, width: 2.0), ), + // GFButtonBar( // mainAxisSize: MainAxisSize.min, // children: [ @@ -153,33 +105,52 @@ class _MyHomePageState extends State { // ), // ), - GFCard( + GFImageOverlay( + width: MediaQuery.of(context).size.width, margin: EdgeInsets.all(16.0), -// color: Colors.pink, - titlePosition: GFPosition.end, - avatar: GFAvatar( - child: Text("tb"), - ), - title: Text('title'), - subTitle: Text('subtitle'), - icon: GFIconButton( - onPressed: null, - icon: Icon(Icons.favorite_border), - type: GFType.transparent, - ), -// image: Image.asset("lib/assets/pizza.jpeg"), -// imageOverlay: Image.asset("lib/assets/pizza.jpeg"), - content: Text("Flutter " - "Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in "), - buttonBar: GFButtonBar( - mainAxisSize: MainAxisSize.min, + padding: EdgeInsets.all(16.0), + child: Column( children: [ - GFButton(onPressed: null, child: Text("favorite"), icon: Icon(Icons.favorite_border), type: GFType.transparent, ), - GFButton(onPressed: null, child: Text("share"), icon: Icon(Icons.share), type: GFType.outline, ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), + new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ),new Text( + 'Hello world', style: TextStyle(color: Colors.white), + ), ], ), - +// color: Colors.orange, + image: AssetImage("lib/assets/pizza.jpeg"), + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), + borderRadius: new BorderRadius.circular(5.0), +// border: Border.all(color: Colors.pink, width: 2.0), ), + // // GFAvatar( //// radius: 40.0, diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 38861213..8eeb0c74 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -116,42 +116,31 @@ class GFCard extends StatelessWidget { ), borderOnForeground: borderOnForeground, clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior, - child: Stack( + child: Column( children: [ -// imageOverlay != null ? imageOverlay : null, - Column( - children: [ -// imageOverlay != null ? GFTitleBar( -// avatar: avatar, -// title: title, -// subTitle: subTitle, -// icon: icon, -// ) : null, - titlePosition == GFPosition.start ? GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ) : ClipRRect( - borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), - child: image, - ), - titlePosition == GFPosition.start ? - image : GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ), - Padding( - padding: padding, - child: content, - ), - buttonBar, - ], + titlePosition == GFPosition.start ? GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ) : ClipRRect( + borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), + child: image, ), + titlePosition == GFPosition.start ? + image : GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ), + Padding( + padding: padding, + child: content, + ), + buttonBar, ], - ) + ), ), ); } From b1a2e6a07f0b5f948ea75bb66851893d465800ce Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 23 Dec 2019 16:41:37 +0530 Subject: [PATCH 2/4] card background image overlay completed --- example/lib/main.dart | 11 ++++-- lib/components/card/gf_card.dart | 67 +++++++++++++++++++------------- 2 files changed, 49 insertions(+), 29 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 3d7c49fa..36e471a3 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -55,7 +55,6 @@ class _MyHomePageState extends State { GFCard( - margin: EdgeInsets.all(16.0), // color: Colors.pink, titlePosition: GFPosition.end, avatar: GFAvatar( @@ -68,9 +67,15 @@ class _MyHomePageState extends State { icon: Icon(Icons.favorite_border), type: GFType.transparent, ), - image: Image.asset("lib/assets/pizza.jpeg"), - imageOverlay: Image.asset("lib/assets/pizza.jpeg"), +// image: Image.asset("lib/assets/pizza.jpeg"), + imageOverlay: AssetImage("lib/assets/pizza.jpeg"), content: Text("Flutter " + "Flutter is Google's mobile UI framework for crafting" + " high-quality native interfaces on iOS and Android in " + "Flutter " + "Flutter is Google's mobile UI framework for crafting" + " high-quality native interfaces on iOS and Android in " + "Flutter " "Flutter is Google's mobile UI framework for crafting" " high-quality native interfaces on iOS and Android in ", style: TextStyle(color: Colors.grey), ), buttonBar: GFButtonBar( diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 8eeb0c74..f98de8c1 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -93,7 +93,7 @@ class GFCard extends StatelessWidget { final Image image; /// overlay image [GFImageOverlay] widget can be used - final Image imageOverlay; + final ImageProvider imageOverlay; /// widget can be used to define buttons bar, see [GFButtonBar] final GFButtonBar buttonBar; @@ -105,6 +105,45 @@ class GFCard extends StatelessWidget { Widget build(BuildContext context) { final CardTheme cardTheme = CardTheme.of(context); + Widget cardChild = Column( + children: [ + titlePosition == GFPosition.start ? GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ) : ClipRRect( + borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), + child: image, + ), + titlePosition == GFPosition.start ? + image : GFTitleBar( + avatar: avatar, + title: title, + subTitle: subTitle, + icon: icon, + ), + Padding( + padding: padding, + child: content, + ), + buttonBar, + ], + ); + + Widget overlayImage = GFImageOverlay( + width: MediaQuery.of(context).size.width, +// margin: EdgeInsets.all(16.0), + padding: EdgeInsets.all(16.0), + child: cardChild, +// color: Colors.orange, + image: imageOverlay, + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), + borderRadius: new BorderRadius.circular(5.0), +// border: Border.all(color: Colors.pink, width: 2.0), + ); + return Container( margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(16.0), child: Material( @@ -116,31 +155,7 @@ class GFCard extends StatelessWidget { ), borderOnForeground: borderOnForeground, clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? _defaultClipBehavior, - child: Column( - children: [ - titlePosition == GFPosition.start ? GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ) : ClipRRect( - borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), - child: image, - ), - titlePosition == GFPosition.start ? - image : GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ), - Padding( - padding: padding, - child: content, - ), - buttonBar, - ], - ), + child: imageOverlay == null ? cardChild : overlayImage ), ); } From b9f684003ba3562142745cf14fd58755c06393d2 Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 23 Dec 2019 17:43:01 +0530 Subject: [PATCH 3/4] GFCard component background image completed --- example/lib/main.dart | 36 ++++++------ lib/components/card/gf_card.dart | 67 +++++++++------------- lib/components/image/gf_image_overlay.dart | 16 ++++-- 3 files changed, 55 insertions(+), 64 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 36e471a3..61ef085d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -55,29 +55,27 @@ class _MyHomePageState extends State { GFCard( -// color: Colors.pink, - titlePosition: GFPosition.end, - avatar: GFAvatar( - child: Text("tb"), - ), - title: Text('title', style: TextStyle(color: Colors.grey),), - subTitle: Text('subtitle', style: TextStyle(color: Colors.grey),), - icon: GFIconButton( - onPressed: null, - icon: Icon(Icons.favorite_border), - type: GFType.transparent, + boxFit: BoxFit.cover, + colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), + image: Image.asset("lib/assets/pizza.jpeg"), +// imageOverlay: AssetImage("lib/assets/pizza.jpeg"), + titlePosition: GFPosition.start, + title: GFTitleBar( + avatar: GFAvatar( + child: Text("tb"), + ), + title: Text('title', style: TextStyle(color: Colors.grey),), + subTitle: Text('subtitle', style: TextStyle(color: Colors.grey),), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ), ), -// image: Image.asset("lib/assets/pizza.jpeg"), - imageOverlay: AssetImage("lib/assets/pizza.jpeg"), content: Text("Flutter " "Flutter is Google's mobile UI framework for crafting" " high-quality native interfaces on iOS and Android in " - "Flutter " - "Flutter is Google's mobile UI framework for crafting" - " high-quality native interfaces on iOS and Android in " - "Flutter " - "Flutter is Google's mobile UI framework for crafting" - " high-quality native interfaces on iOS and Android in ", style: TextStyle(color: Colors.grey), ), + "Flutter ", style: TextStyle(color: Colors.grey), ), buttonBar: GFButtonBar( mainAxisSize: MainAxisSize.min, children: [ diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index f98de8c1..3a960261 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -19,19 +19,19 @@ class GFCard extends StatelessWidget { this.padding = const EdgeInsets.all(12.0), this.margin, this.clipBehavior, - this.child, this.semanticContainer, - this.avatar, this.title, - this.subTitle, this.subTitleTextStyle, this.titleTextStyle, this.content, this.image, - this.icon, this.buttonBar, this.imageOverlay, - this.titlePosition + this.titlePosition, + this.borderRadius, + this.border, + this.boxFit, + this.colorFilter }) : assert(elevation == null || elevation >= 0.0), assert(borderOnForeground != null), super(key: key); @@ -65,20 +65,8 @@ class GFCard extends StatelessWidget { /// a collection of individual semantic nodes. final bool semanticContainer; - /// The widget below this widget in the tree. - final Widget child; - - /// gfAvatar used to create rounded user profile - final GFAvatar avatar; - - /// The title to display inside the [GFTitleBar]. see [Text] - final Widget title; - - /// The subTitle to display inside the [GFTitleBar]. see [Text] - final Widget subTitle; - - /// The icon to display inside the [GFTitleBar]. see [Icon] - final Widget icon; + /// The title to display inside the [GFTitleBar]. see [GFTitleBar] + final GFTitleBar title; /// pass [style] as title's textStyle final TextStyle titleTextStyle; @@ -98,6 +86,20 @@ class GFCard extends StatelessWidget { /// widget can be used to define buttons bar, see [GFButtonBar] final GFButtonBar buttonBar; + /// How the image should be inscribed into the box. + /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and + /// [BoxFit.fill] if [centerSlice] is not null. + final BoxFit boxFit; + + /// A color filter to apply to the image before painting it. + final ColorFilter colorFilter; + + /// The corners of this [GFCard] are rounded by this [BorderRadius]. + final BorderRadiusGeometry borderRadius; + + /// A border to draw above the [GFCard]. + final Border border; + static const double _defaultElevation = 1.0; static const Clip _defaultClipBehavior = Clip.none; @@ -107,22 +109,11 @@ class GFCard extends StatelessWidget { Widget cardChild = Column( children: [ - titlePosition == GFPosition.start ? GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ) : ClipRRect( + titlePosition == GFPosition.start ? title : ClipRRect( borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), child: image, ), - titlePosition == GFPosition.start ? - image : GFTitleBar( - avatar: avatar, - title: title, - subTitle: subTitle, - icon: icon, - ), + titlePosition == GFPosition.start ? image : title, Padding( padding: padding, child: content, @@ -133,15 +124,13 @@ class GFCard extends StatelessWidget { Widget overlayImage = GFImageOverlay( width: MediaQuery.of(context).size.width, -// margin: EdgeInsets.all(16.0), - padding: EdgeInsets.all(16.0), child: cardChild, -// color: Colors.orange, + color: color ?? cardTheme.color ?? Theme.of(context).cardColor, image: imageOverlay, - boxFit: BoxFit.cover, - colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.darken), - borderRadius: new BorderRadius.circular(5.0), -// border: Border.all(color: Colors.pink, width: 2.0), + boxFit: boxFit, + colorFilter: colorFilter, + border: border, + borderRadius: borderRadius ?? BorderRadius.all(Radius.circular(4.0)), ); return Container( diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index 5c99375c..0a874399 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -12,7 +12,6 @@ class GFImageOverlay extends StatelessWidget { this.margin, this.image, this.child, - this.constraints, this.alignment, this.decoration, this.borderRadius, @@ -48,12 +47,18 @@ class GFImageOverlay extends StatelessWidget { /// The decoration to paint behind the [child]. final Decoration decoration; - /// Additional constraints to apply to the child. - final BoxConstraints constraints; - + /// How the image should be inscribed into the box. + /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and + /// [BoxFit.fill] if [centerSlice] is not null. final BoxFit boxFit; + + /// A color filter to apply to the image before painting it. final ColorFilter colorFilter; - final BorderRadius borderRadius; + + /// The corners of this [GFCard] are rounded by this [BorderRadius]. + final BorderRadiusGeometry borderRadius; + + /// A border to draw above the [GFCard]. final Border border; @override @@ -69,7 +74,6 @@ class GFImageOverlay extends StatelessWidget { decoration: new BoxDecoration( borderRadius: borderRadius, border: border, -// backgroundBlendMode: BlendMode.darken, color: color, image: new DecorationImage( fit: boxFit, From 9bd93fff8f8fce13073e4c9ba2d46b75a563ff0a Mon Sep 17 00:00:00 2001 From: deepikahr Date: Mon, 23 Dec 2019 17:57:30 +0530 Subject: [PATCH 4/4] GFCard component completed --- example/lib/main.dart | 3 +-- lib/components/card/gf_card.dart | 16 +++--------- lib/components/image/gf_image_overlay.dart | 29 +++++++++------------- 3 files changed, 16 insertions(+), 32 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 61ef085d..b52a897c 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -53,13 +53,12 @@ class _MyHomePageState extends State { children: [ - GFCard( boxFit: BoxFit.cover, colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.67), BlendMode.darken), image: Image.asset("lib/assets/pizza.jpeg"), // imageOverlay: AssetImage("lib/assets/pizza.jpeg"), - titlePosition: GFPosition.start, + titlePosition: GFPosition.end, title: GFTitleBar( avatar: GFAvatar( child: Text("tb"), diff --git a/lib/components/card/gf_card.dart b/lib/components/card/gf_card.dart index 3a960261..93ca4e30 100644 --- a/lib/components/card/gf_card.dart +++ b/lib/components/card/gf_card.dart @@ -1,6 +1,5 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -import 'package:ui_kit/components/avatar/gf_avatar.dart'; import 'package:ui_kit/components/button_bar/gf_button_bar.dart'; import 'package:ui_kit/components/header_bar/gf_title_bar.dart'; import 'package:ui_kit/components/image/gf_image_overlay.dart'; @@ -21,8 +20,6 @@ class GFCard extends StatelessWidget { this.clipBehavior, this.semanticContainer, this.title, - this.subTitleTextStyle, - this.titleTextStyle, this.content, this.image, this.buttonBar, @@ -55,7 +52,6 @@ class GFCard extends StatelessWidget { final Clip clipBehavior; /// The empty space that surrounds the card. Defines the card's outer [Container.margin]. - final EdgeInsetsGeometry margin; /// The empty space that surrounds the card. Defines the card's outer [Container.margin].. @@ -68,12 +64,6 @@ class GFCard extends StatelessWidget { /// The title to display inside the [GFTitleBar]. see [GFTitleBar] final GFTitleBar title; - /// pass [style] as title's textStyle - final TextStyle titleTextStyle; - - /// pass [style] as subTitle's textStyle - final TextStyle subTitleTextStyle; - /// widget can be used to define content final Widget content; @@ -109,11 +99,11 @@ class GFCard extends StatelessWidget { Widget cardChild = Column( children: [ - titlePosition == GFPosition.start ? title : ClipRRect( + titlePosition == GFPosition.start ? title != null ? title : Container() : image != null ? ClipRRect( borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)), child: image, - ), - titlePosition == GFPosition.start ? image : title, + ): Container(), + titlePosition == GFPosition.start ? image != null ? image : Container(): title != null ? title : Container(), Padding( padding: padding, child: content, diff --git a/lib/components/image/gf_image_overlay.dart b/lib/components/image/gf_image_overlay.dart index 0a874399..d373e7a8 100644 --- a/lib/components/image/gf_image_overlay.dart +++ b/lib/components/image/gf_image_overlay.dart @@ -13,7 +13,6 @@ class GFImageOverlay extends StatelessWidget { this.image, this.child, this.alignment, - this.decoration, this.borderRadius, this.colorFilter, this.boxFit, @@ -44,9 +43,6 @@ class GFImageOverlay extends StatelessWidget { /// Align the [child] within the container. final AlignmentGeometry alignment; - /// The decoration to paint behind the [child]. - final Decoration decoration; - /// How the image should be inscribed into the box. /// The default is [BoxFit.scaleDown] if [centerSlice] is null, and /// [BoxFit.fill] if [centerSlice] is not null. @@ -64,22 +60,21 @@ class GFImageOverlay extends StatelessWidget { @override Widget build(BuildContext context) { - return Center( - child: new Container( - height: height, - width: width, - margin: margin, - padding: padding, - child: child, - decoration: new BoxDecoration( - borderRadius: borderRadius, - border: border, - color: color, - image: new DecorationImage( + return Container( + alignment: alignment, + height: height, + width: width, + margin: margin, + padding: padding, + child: child, + decoration: new BoxDecoration( + borderRadius: borderRadius, + border: border, + color: color, + image: new DecorationImage( fit: boxFit, colorFilter: colorFilter, image: image - ), ), ), );