Decoration new boxdecoration image container flutter
In Flutter, you can use the BoxDecoration
widget to add a decoration to a box-shaped widget, such as a Container
. Here's an example of how to use BoxDecoration
to add an image to a container:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image.jpg'), // Replace with your image path
fit: BoxFit.cover,
),
),
)
In this example, the BoxDecoration
widget is used to add a decoration to the Container
. The image
property of BoxDecoration
is set to a DecorationImage
widget, which is used to display the image. The AssetImage
widget is used to load the image from the assets folder.
You can also use BoxDecoration
to add a border, gradient, or other types of decorations to a container. Here are some examples:
// Add a border
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
),
)
// Add a gradient
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
),
),
)
// Add a shadow
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0, 2),
blurRadius: 4,
),
],
),
)
You can combine these decorations to create a more complex design. For example:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image.jpg'),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.red, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0, 2),
blurRadius: 4,
),
],
),
)
This example adds an image, a border, and a shadow to the container.