CODEWITHSUNDEEP
flutterflutter-layout
Dan
Dan

Reputation: 237

Text with inline images in Flutter

I am trying to create a layout with a left-aligned or right-aligned image and a text that wraps around the image. Is it possible to build this kind of layout with Flutter?

This is the layout I am trying to create:

example

Upvotes: 20

Views: 6388

Answers (6)

Iliya Mirzaei
Iliya Mirzaei

Reputation: 166

Now simply you can achieve this using the Flutter Text.rich() widget.

const Text.rich(
  TextSpan(
    children: <InlineSpan>[
      TextSpan(text: 'Flutter is'),
      WidgetSpan(
        child: SizedBox(
          width: 120,
          height: 50,
          child: Card(
            child: Center(
              child: Text('Hello World!')
            )
          ),
        )
      ),
      TextSpan(text: 'the best!'),
    ],
  )
)

More details here.

Upvotes: 1

ronb
ronb

Reputation: 261

Yes, it is now possible to build that kind of layout in Flutter. For example, this code:

import 'package:float_column/float_column.dart';

FloatColumn(
  children: [
    Floatable(
      float: FCFloat.start,
      maxWidthPercentage: 0.33,
      padding: const EdgeInsetsDirectional.only(end: 12),
      child: Image(image: AssetImage('bill-gates.jpeg')),
    ),
    const WrappableText(
        text: TextSpan(
            text: 'A floating image',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))),
    const WrappableText(
        text: TextSpan(
            text:
                'Iste quidem veteres inter ponetur honeste...')),
  ],
)

Produces this:

enter image description here

Upvotes: 3

TruongSinh
TruongSinh

Reputation: 4856

@Tiziano works in a specific case. For more general cases with complicated inline image, for now I can see other way than using inline HTML webview and style="float: left" HTML attribute. I'm making a PR for this feature (webview loading HTML string) 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.
              """,
            ),

enter image description here

Upvotes: 0

Tiziano Munegato
Tiziano Munegato

Reputation: 929

I published a package: drop_cap_text to achive DropCapText, you can also insert an image as a custom DropCap, result below

enter image description here

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

Upvotes: 2

tudorprodan
tudorprodan

Reputation: 965

You can create a Container and clip it with ClipPath in the shape of your text. After that, to put everything together you add both this Container and Image in a Stack.

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

And in your custom CustomClipper you just cut the portion where the image should occupy and Flutter will make sure to not render any child Widget in that portion.

Upvotes: -1

Taha Ali
Taha Ali

Reputation: 1324

Sadly for now this kind of text wrap is not supported in Flutter. You can wrap text in front of the picture but not below it.

Upvotes: 0

Related Questions