Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Wrapping image with text. RichText and Wrap do not work

What I want:

I would like to wrap some text around an image in Flutter. Since there are already many questions about that, what I mean by "wrapping some text around an image" is this:

enter image description here

To achieve that, I’ve tried using both RichText and Wrap classes, without success. What I’m getting with:

RichText (Text.rich) [not what I want]:

enter image description here

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Rich Text (Text.rich) test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  WidgetSpan(
                    child: Image.network(
                      'https://picsum.photos/250?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                  TextSpan(
                    text:
                        "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );

I’ve also tried adding alignment: PlaceholderAlignment.middle to WidgetSpan in the code above, getting the following result (also, not what I want):

enter image description here

Wrap [not what I want]:

enter image description here

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Wrap test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Wrap(
              children: [
                Image.network(
                  'https://picsum.photos/250?image=9',
                  width: 200,
                  height: 200,
                ),
                Text(
                  "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                )
              ],
            ),
          ),
        ),
      ),
    );

How can I achieve what I want in Flutter?

Tags:

2

Answers


  1. 0

    The Stack widget allows you to overlay widgets on top of each other. By strategically positioning the text and image, you can create a layout where the text wraps around the image.

    Use the Positioned widget to place the image within the Stack, and then add padding to the text to ensure it wraps around the image.

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text Wrap Around Image')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    padding: const EdgeInsets.only(left: 210.0),
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
                      'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
                      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                  Positioned(
                    left: 0,
                    child: Image.network(
                      'https://picsum.photos/100?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

    I hope this may resolve your issue,

    Login or Signup to reply.
  2. 0

    There’s an old package called drop_cap_text that does exactly what you need, allowing you to wrap text around an image. However, it hasn’t been updated to be compatible with newer versions of Flutter. Fortunately, you can use this fork of the package until the changes are merged into the original package.

    For that, add the following to your pubspec.yaml file to include the updated package:

    dependencies:
  drop_cap_text:
    git:
      url: [email protected]:parlough/drop_cap_text.git
      ref: feat/adapt-for-deprecations

    After that, you can use the package like this:

    DropCapText(
  'loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum',
  dropCapPadding: const EdgeInsets.only(right: 8, bottom: 8), // Padding between the text and the image
  dropCap: DropCap(
    width: 200, // Set the width of the image
    height: 200, // Set the height of the image
    child: Image.network('https://picsum.photos/250?image=9'),
  ),
)

    Sample code output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search