How can I float text around an image in Flutter?

Question

How could I achieve this layout in Flutter?

Nothing, really. I was searching the docs for something that would point me in the right direction and didn't find any. — ButteredQwaffles, Jan 10 '19 at 14:06
https://github.com/flutter/flutter/issues/2022#issuecomment-376370973 you can easily implement it like this — Umair M, Jan 10 '19 at 15:13
@UmairM Yeah, I saw that in the thread earlier. I meant it was disappointing there's nothing built in for it. Thank you! If you want, you can add it as an answer. I'll accept it. — ButteredQwaffles, Jan 10 '19 at 15:57
I have posted the answer and will see if I got some free time this weekend. I will implement this and let you know how it turns out :) — Umair M, Jan 10 '19 at 18:18

score 12 · Accepted Answer · answered Mar 09 '19 at 16:24

12

I published package drop_cap_text to achive DropCapText, you can also put an image as custom widget inside DropCap.

answered Mar 09 '19 at 16:24

Tiziano Munegato

869
1
7
21

I'm using this package. But I have an issue: https://github.com/mtiziano/drop_cap_text/issues/14 – Mr. ZeroOne Jan 04 '21 at 05:48

score -2 · Answer 2 · answered Jan 10 '19 at 13:43

-2

its Pretty basic just simple Row with the data inside it

 Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
      Image.asset('Your image link here'),
      Text('you paragraph here')
    ],)

answered Jan 10 '19 at 13:43

Mohamed hassan kadri

994
6
17

1

Apologies, I should have been clearer. This will have a fixed width and the text will also need to go flow below the image. – ButteredQwaffles Jan 10 '19 at 13:45

score -2 · Answer 3 · answered Jan 10 '19 at 13:44

You can use Stack(): https://flutter.io/docs/development/ui/layout#stack

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: const Alignment(0.6, 0.6),
      children: [
        CircleAvatar(
          backgroundImage: AssetImage('images/pic.jpg'),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'Mia B',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
    // ...
  }
}

You can use a Container() widget with foregroundDecoration:

Container(
  child: Text('Hello World'),
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),

This seems to make the text overlay the image rather than put the text to the side around the image. — ButteredQwaffles, Jan 10 '19 at 13:53

How can I float text around an image in Flutter?

3 Answers3

Linked