Search code examples
flutterdart

How to wrap text around a widget

How to wrap text around the Icon as the text will drop under the icon as its height is more than that of the icon. In the below image, text should be under the icon from fourth line

current state

I've tried wrapping it Expanded and Flex, Better if no hard coded customizations.

Solution

  • I believe you are looking for something similar to CSS's float. There is a package called float_column. This should solve your issue, implement it as such:

    FloatColumn(
  children: [
    const Floatable(
      float: FCFloat.start,
      child: Icon(
        Icons.info,
        size: 50.0,
      )
    ),
    WrappableText(text: TextSpan(text: loremIpsum))
  ],
),

    In the example, your icon will be included inside the floatable widget, which is provided by the package itself. Your text should be wrapped by the WrappableText widget. Also don't forget to set the float parameter to the Floatable widget as per your need, your example requires the FCFloat.start. The result will be:

    result