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

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