How to show a constrained widget below another widget in Flutter?

Question

I'd like to implement something like this:

It would be horizontally scrollable.

The rectangles are images, I want to make their height for eg. 200 and their width to be the maximum of screen width. this I can make easily,

BUT I'd also like to show some Text below them, and this text should be as wide as the image. now simply putting the image+text in a Column doesn't help as the Column's width grows beyond the image if the Text is longer. How could I achieve this?

Answer 1

You can place your text to a container that its width is equal to the image above it.

Answer 2

You can simply create a SizedBox Widget with Specified Width, which contains Your Image and Text inside a ListView with shrinkWrap Enabled. which would make your UI More flexible, Modular and solves your problem of wrapping text.

Answer 3

There are several possibilities:

1- Define your own dimensions to the images:
Code:

ListView(
  scrollDirection: Axis.horizontal, children: [
         Column(
          children: [
             Image.network(
               'https://image.flaticon.com/icons/png/512/226/226770.png',
               height: 200,
               width: 200,
             ),
             Container(
               width: 200,
               child: Text(
               'Android is a mobile operating system  sponsored by Google '),
             ),
           ],
         ),
         Column(
           children: [
             Image.network(
               'https://img.icons8.com/ios/452/ios-logo.png',
               height: 200,
               width: 200,
             ),
             Container(
               width: 200,
               child: Text(
              'iOS is a mobile operating system created and developed by Apple Inc. '),
             ),
           ],
         )
       ])

2- Use dimensions of the image to create a container of the adapted text.

Use this function to retrieve the dimensions of your images and adapt your text with these dimensions.

Function:

Future<Size> getImageDimension() {
  Completer<Size> completer = Completer();
  Image image = Image.network("https://i.stack.imgur.com/lkd0a.png");
  image.image.resolve(ImageConfiguration()).addListener(
    ImageStreamListener(
      (ImageInfo image, bool synchronousCall) {
        var myImage = image.image;
        Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
        completer.complete(size);
      },
    ),
  );
  return completer.future;
}

Example of usage:

getImageDimension().then((size) => print("size = ${size}")); // 487.0,696.0