This article guides on adding an image to a Container widget in Flutter.
Adding an image to a Container widget is really easy. For demonstration purposes, the Container’s width and height are set to 200 pixels. Inside its decoration, a grey color is used, and a DecorationImage displays the image.
A child widget can also be added to the Container, allowing it to appear on top of the image, much like a stack.
Code:
import 'package:flutter/material.dart';
class ImageContainer extends StatefulWidget {
const ImageContainer({super.key});
@override
State<ImageContainer> createState() => _ImageContainerState();
}
class _ImageContainerState extends State<ImageContainer> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey,
image: DecorationImage(
image: AssetImage('assets/images/flutter_logo.png'),
),
),
),
),
);
}
}
Output:
