Designing a layout with a picture and a long paragraph

user_12333921 0
Viewed 145

I am trying to design the following layout for a flutter web app

enter image description here

There is an image on the left, and on it's right, the paragraph starts, but once the right side of the image has been filled with text, I want the paragraph to continue from below the image as shown in the picture.

flutter-web flutter-layout flutter
1 Answers

You can try RichText Widget something like below : (Haven't tested)

RichText(
          text: TextSpan(
            children: [
              WidgetSpan(
                  child: SizedBox(
                      height: 150,
                      width: 150,
                      child: Image.network(
                          "https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png"))),
              TextSpan(
                  text: text,
                  style: const TextStyle(fontWeight: FontWeight.bold)),
            ],
          ),
        )

OR

You can have both image and text in HTML format then render HTML in flutter using flutter_html package.

<p><img src="w3css.gif" width="100" height="140" style="float:left;">
Your long text here
</p>

I hope this helps you !

user_87071110
Related