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

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

CodePudding user response：

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

CodePudding user response：

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,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }