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

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


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')    ),),

this

Or you could try it yourself by mixing and matching SizedBox with RichText as they did in the library.


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:flutter)


There's a new float_column library for flutter that supports this:

example screenshot

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