Текст со встроенными изображениями в Flutter

Question

Я пытаюсь создать макет с выровненным по левому или правому краю изображением и текстом, который обернут вокруг изображения.Можно ли создать такой макет с помощью Flutter?

Это макет, который я пытаюсь создать:

Answer 1

@ Тициано работает в конкретном случае.Для более общих случаев со сложным встроенным изображением, сейчас я вижу другой способ, чем использование встроенного веб-просмотра HTML и атрибута style="float: left" HTML.Я делаю пиар для этой функции (загрузка веб-строки HTML-строки) https://github.com/flutter/plugins/pull/1312

const WebView(
              htmlString: """
<u><em><strong>You can do HTML too!</strong></em></u><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: right"> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              """,
            ),

Answer 2

Вы можете создать Container и обрезать его с помощью ClipPath в форме вашего текста.После этого, чтобы собрать все воедино, вы добавляете и эти Container и Image в Stack.

Widget build(BuildContext context) {
    return Stack(
        children: [
            _buildImageWidget(),
            ClipPath(
                clipper: MyCustomClipper(),
                child: _buildTextWidget(),
            ),
        ],
    );
}

. И в своем пользовательском CustomClipper вы просто обрезаете часть, которая должна занимать изображениеи Flutter позаботится о том, чтобы не отображать дочерние виджеты в этой части.

Answer 3

Я опубликовал пакет : drop_cap_text для достижения DropCapText, вы также можете вставить изображение в виде пользовательского DropCap, результат ниже

DropCapText(
  loremIpsumText,
  dropCap: DropCap(
  width: 100,
  height: 100,
  child: Image.network(
    'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
  ),
),

Answer 4

К сожалению, пока что этот вид переноса текста не поддерживается во Flutter.Вы можете обернуть текст перед изображением, но не под ним.