Image
The C2CImage widget is a customizable image widget designed for use in Flutter applications.
It offers various features and customization options, including fade-in/out animations, error handling, and semantic labels.
Example Usage
// Normal image
const C2CImage(
size: Size(double.infinity, 250),
image: NetworkImage('https://picsum.photos/200'),
errorImage: AssetImage('assets/images/noAvatar.png'),
placeholderImage: AssetImage('assets/images/loading.png'),
)
// Circle image
const C2CImage(
size: Size.square(200),
image: NetworkImage('https://picsum.photos/200'),
errorImage: AssetImage('assets/images/noAvatar.png'),
placeholderImage: AssetImage('assets/images/loading.png'),
shape: BoxShape.circle,
)
// Show image with min/max size
const C2CImage(
constraints: BoxConstraints(
minWidth: 150,
maxWidth: 250,
minHeight: 150,
maxHeight: 250,
),
image: NetworkImage('https://picsum.photos/200'),
placeholderImage: AssetImage('assets/images/noAvatar.png'),
isShowPlaceholderWhenError: true,
)
Properties
| Property | Description | Type |
|---|---|---|
| image | The target image to display. | ImageProvider? |
| size | The size of the image. Size(width, height). Default is: Size(40,40) | Size? |
| constraints | Minimum and maximum size constraints for the image. | BoxConstraints? |
| shape | The shape of the image container. (rectangle or circle). Default: BoxShape.rectangle | BoxShape |
| fit | How to inscribe the image into the allocated space. Default: BoxFit.cover | BoxFit |
| filterQuality | The rendering quality of the image. | FilterQuality |
| alignment | How to align the image within its bounds. | AlignmentGeometry |
| repeat | How to repeat the image if it doesn't cover the entire space. | ImageRepeat |
| backgroundColor | The background color of the image container. | Color? |
| placeholderImage | Image to display while the target image is loading. | ImageProvider? |
| placeholderImageFit | How to fit the placeholder image. | BoxFit? |
| placeholderImageFilterQuality | Rendering quality of the placeholder image. | FilterQuality? |
| placeholderImageBuilder | Builder function for the placeholder. | Widget Function(BuildContext)? |
| isShowPlaceholderWhenError | Whether to show the placeholder when an error occurs. | bool? |
| errorImage | Image to display if an error occurs during loading. | ImageProvider? |
| errorImageFit | How to fit the error image. | BoxFit? |
| errorImageFilterQuality | Rendering quality of the error image. | FilterQuality? |
| errorImageBuilder | Builder function for the error image. | Widget Function(BuildContext)? |
| isFadeEnabled | Enable or disable fade-in/out animations. | bool? |
| fadeOutDuration | Duration of the fade-out animation for the placeholder image. | Duration |
| fadeOutCurve | Curve of the fade-out animation for the placeholder image. | Curve |
| fadeInDuration | Duration of the fade-in animation for the target image. | Duration |
| fadeInCurve | Curve of the fade-in animation for the target image. | Curve |
| matchTextDirection | Whether to paint the image based on text direction. | bool |
| excludeFromSemantics | Whether to exclude the image from semantics. | bool |
| imageSemanticLabel | A semantic description of the image. | String? |