Text wrapping

[cooler-king]

Feature request: Make it easier to control text wrapping in Rows.

[abarth]

From the email thread, he's looking to create a horizontal layout with an icon on the left and a text on the right where the size of the widget expands as the amount of text increases until it hits its width constraints and at that point the text starts wrapping.

[abarth]

Current proposal is to add an enum to Flexible about whether the child should be given tight or loose constraints. Current behavior today is tight constraints, but loose constraints would satisfy @cooler-king 's use case.

[krisgiesing]

I was playing around with nested Flex widgets and hit this situation, which I think is probably the same as what @cooler-king described. In the following example code, the description text overflows off the right side of the screen instead of wrapping.

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'Nested flex and text wrapping',
      home: new FlutterDemo()
    )
  );
}

class FlutterDemo extends StatelessWidget {

  String recipeName = "Chocolate chip cookies";
  String recipeShortDescription = "They are delicious!";
  String recipeDescription = "A perennial favorite of children everywhere, "
    "the taste of a good chocolate chip cookie can't be overstated. Whereas "
    "the chip can provide a range of consistency from gooey to crumbly, the "
    "dough gives that satisfying crunchy-on-the-outside, chewy-on-the-inside "
    "texture.";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo')
      ),
      body: new Row(
        children: <Widget>[
          new Icon(
            icon: Icons.add
          ),
          new Column(
            children: <Widget>[
              new Text(recipeName),
              new Text(recipeDescription)
            ],
            crossAxisAlignment: CrossAxisAlignment.start
          ),
        ],
        crossAxisAlignment: CrossAxisAlignment.start
      )
    );
  }
}

[krisgiesing]

Interestingly if I take the Row out (leaving just the Column) the text wraps properly.

[krisgiesing]

I was able to solve my problem by wrapping the Column here in a Flexible. @cooler-king, I wonder if wrapping the direct child of your Row with a Flexible would help in your original case? I don't recall from the mailing list whether you eventually found a solution that worked for you.

[Hixie]

As I understand it, Adam's proposed fix landed which addresses this bug. Closing.

@cooler-king, @krisgiesing, @abarth: please reopen if I'm wrong about this being resolved.

[namiwang]

This still happens in the latest master ((Channel master, v0.2.3-pre.41, on Mac OS X 10.13.3 17D102, locale en-US)).

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'Nested flex and text wrapping',
      home: new FlutterDemo()
    )
  );
}

class FlutterDemo extends StatelessWidget {

  String recipeName = "Chocolate chip cookies";
  String recipeShortDescription = "They are delicious!";
  String recipeDescription = "A perennial favorite of children everywhere, "
    "the taste of a good chocolate chip cookie can't be overstated. Whereas "
    "the chip can provide a range of consistency from gooey to crumbly, the "
    "dough gives that satisfying crunchy-on-the-outside, chewy-on-the-inside "
    "texture.";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo')
      ),
      body: new Row(
        children: <Widget>[
          new Icon(Icons.add),
          new Column(
            children: <Widget>[
              new Text(recipeName),
              new Text(recipeDescription)
            ],
            crossAxisAlignment: CrossAxisAlignment.start
          ),
        ],
        crossAxisAlignment: CrossAxisAlignment.start
      )
    );
  }
}