如何在 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: )

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