How can I float Text Widget around an Image Widget in Flutter - dart

Question

How can I achieve the effect in flutter? Is there an example?

Answer 1

You could use drop_cap_text library to get this behavior. Usage is something like this:
DropCapText(
loremIpsumText,
dropCap: DropCap(
width: 100,
height: 100,
child: Image.network(
'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
),
),
Or you could try it yourself by mixing and matching SizedBox with RichText as they did in the library.

Answer 2

Very simple and you do not need to use the library.
// Replace IconSVG with image of you.
RichText(
text: TextSpan(
children: [
WidgetSpan(
child: IconSVG(
IconSVGPath.ic_suggest, 30, 30, null),
),
TextSpan(text: " Tùy chọn các nội dung dưới đây để thay đổi giao diện CV phù hợp với bản thân bạn.",
style: TextStyle(color: HexColor(
StringColors.color_orange_primary),
fontSize: 16,
fontWeight: FontWeight.w400,
fontFamily: NUNITO_SANS),
),
],
style: TextStyle(color: Colors.red,)
),
The result will look like this:
)

Answer 3

There's a new float_column library for flutter that supports this:
With code like this:
FloatColumn(
children: [
const Floatable(float: FCFloat.start, child: DropCap('“T', size: 3)),
Floatable(
float: FCFloat.end,
clear: FCClear.start,
clearMinSpacing: 12,
maxWidthPercentage: 0.333,
padding: EdgeInsetsDirectional.only(start: 8),
child: Img(
assetName: _name('jeremy-bishop-EwKXn5CapA4-unsplash.jpg'),
title: 'Photo by Jeremy Bishop on Unsplash',
),
),
Floatable(
float: FCFloat.start,
clear: FCClear.start,
clearMinSpacing: 175,
maxWidthPercentage: 0.25,
padding: EdgeInsetsDirectional.only(end: 12),
child: Img(
assetName: _name('walt_whitman.jpg'),
title: 'Walt Whitman',
),
),
WrappableText(text: _text),
],
)
You can see the full example code here: basic_ltr.dart