How to use Image inside Stack widget in Flutter? - flutter

Question

I got an error when using Image inside Stack widget :
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
...
this is my code :
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Flexible(
child: Image.asset(itemData["image"])
),
),
const Positioned(
...
),
],
),
],
),
);
}
of course, I defined my image assets in pubspec.yaml and I try to remove flexible widget also add Row layer above it, but it's still not working either...
this is my error when I remove flexible widget :
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/image2.jpg
When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:237:7)
<asynchronous suspension>
#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "assets/images/image2.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#898db(), name:
"assets/images/image2.jpg", scale: 1.0)
So, How I can use (multiple) Images inside Stack Widget, and what's wrong with my code?
thank you for coming and I hope you have the solution. cheers

Answer 1

You have done everything perfect. but the one mistake was you wraped Image Widget by flexible. thats why flutter throws error. below code will work fine.
just remove flexible widget.
Container(
margin: const EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.network(
"https://www.writerswrite.co.za/wp-content/uploads/2017/04/how-long-to-read.png",
),
),
Positioned(
child: Container(
height: 20,
color: Colors.red,
width: 20,
),
),
],
),
],
),
);
Flexible Widget used to adjust the available space near the widgets...
so renderobject not able to paint what you construct in UI because of you wraped flexible over Image
to learn more about flexible refer : https://api.flutter.dev/flutter/widgets/Flexible-class.html
above code will working fine...
for image rendering issue : refer https://docs.flutter.dev/development/platform-integration/web-images

Answer 2

Wrap the Stack with expanded widget. I tried with the example below and it worked for me
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Flexible(
child: Image.network(
"https://www.writerswrite.co.za/wp-content/uploads/2017/04/how-long-to-read.png",
),
),
),
Positioned(
child: Container(
height: 20,
color: Colors.red,
width: 20,
),
),
],
),
),
],
),
);
}