Constrain Column's maxWidth with a specific child's width in Flutter?

Question

3 items have to be displayed in a row: image and a description below, so it's basically a Row of Columns. Description size varies and can either exceed or be smaller than the image's width. These images has to be laid out evenly with the description multilined if needed.

So the naive code looks roughly like this:

@override
  Widget build(BuildContext context) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          for (final item in items)
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Image.asset(item.depiction),
                Text(
                  item.name,
                  textAlign: TextAlign.center,
                ),
              ],
            )
        ],
      );

The problem is that the Column is sized by width from the text's size, and if it exceeds the image's size, then the images in a Row aren't spaced evenly. The solution I see is to constrain the Column width to the width of Image, using, for example, some kind of Builder widget, but it does not seem right at all.

What I tried is wrapping all the Row's children with Expanded, but then spaceAround does not have any effect, as all the children get sized to the 1/3 of the Row, and this spacing is vital, where the free space should have the value of row.length - 3 * image.size (pseudocode to give a general idea). Wrapping Column with Flexible and setting stretch cross axis alignment to the same Column gives the same effect - Column sizes to the 1/3 of the Row length.

What's the proper way to constraint the Text width to have maxWidth of image's width?

Image:

In the third Row it works properly, as the Text width is less than image's.

In the second Row Text's width is greater than image's width, so the Column is sized by the one-line text width and the image's layout is not equal to the previous one.

The first Row is how I want the second Row to be rendered, in this example it's just the separated (\n) description which results in the visual effect I seek for.

Answer 1

You could wrap those Columns in a fixed width SizedBoxs like this..

SizedBox(
        width: 200,
        child: Column(
          children: [
            Image.asset(item.depiction),
            Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et',
            ),
          ],
        ),
      )

Answer 2

I think this is what you want:

Image 1

Image 2

Image 3

Code:

class ClassName extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],

      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text('This is the solution', style: TextStyle(color: Colors.black, fontSize: 18.0),),
      ),

      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
        ],
      ),
    );
  }
}

col(context){
  return SizedBox(
    width: MediaQuery.of(context).size.width*0.3,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        SizedBox(height: 100.0, child: Image.asset('assets/02.jpg')),
        Text('smith smith smith smith smith smith smith', textAlign: TextAlign.center),
      ],
    ),
  );
}

Answer 3

So I ended up with a quite hacky solution for now which I'm not comfortable with, but posting it nevertheless for the people that seek for the same answer:

typedef ImageBasedBuilder = Widget Function(
    BuildContext context, ImageInfo image);

class ImageInfoBasedWidget<T> extends StatefulWidget {
  final ImageProvider<T> provider;
  final ImageBasedBuilder builder;

  const ImageInfoBasedWidget({
    @required this.provider,
    @required this.builder,
    Key key,
  }) : super(key: key);

  @override
  _ImageInfoBasedWidgetState<T> createState() =>
      _ImageInfoBasedWidgetState<T>();
}

class _ImageInfoBasedWidgetState<T>
    extends State<ImageInfoBasedWidget<T>> {
  ImageStream _imageStream;
  ImageStreamListener _streamListener;
  ImageInfo _imageInfo;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _resolveImage();
  }

  @override
  void didUpdateWidget(ImageInfoBasedWidget<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.provider != widget.provider) {
      _resolveImage();
    }
  }

  @override
  void dispose() {
    _imageStream.removeListener(_streamListener);
    super.dispose();
  }

  void _resolveImage() {
    final ImageStream oldImageStream = _imageStream;
    _imageStream =
        widget.provider.resolve(createLocalImageConfiguration(context));
    if (_imageStream.key != oldImageStream?.key) {
      final ImageStreamListener listener = ImageStreamListener(_provideImage);
      oldImageStream?.removeListener(listener);
      _imageStream.addListener(listener);
    }
  }

  void _provideImage(ImageInfo imageInfo, bool syncCall) =>
      setState(() => _imageInfo = imageInfo);

  @override
  Widget build(BuildContext context) {
    if (_imageInfo == null) {
      return Container();
    } else {
      return widget.builder(context, _imageInfo);
    }
  }
}

It's quite straightforward - we are just getting the image configuration that will be used to afterwards by the builder object function. We can place text constraints with ConstrainedBox which will have maxWidth of imageInfo.image.width.

Answer 4

This is the third questions I've seen on stack overflow that ask for this.

I just wrote a package for it: https://pub.dev/packages/flex_with_main_child

You can replace your Column with ColumnWithMainChild from flex_with_main_child.

Column(
  mainAxisSize: MainAxisSize.min,
  mainChild: Image.asset(item.depiction),
  childrenBelow: <Widget>[
    Text(
      item.name,
      textAlign: TextAlign.center,
    ),
  ],
)