How can I float text around an image in Flutter?

Question

How could I achieve this layout in Flutter?

Cognizant

what have you tried so far? – Eurythmics

Nothing, really. I was searching the docs for something that would point me in the right direction and didn't find any. – Cognizant

github.com/flutter/flutter/issues/2022 – Police

Disappointing... – Cognizant

github.com/flutter/flutter/issues/2022#issuecomment-376370973 you can easily implement it like this – Eurythmics

@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. – Cognizant

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 :) – Eurythmics

Answer 1

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

Formicary

I'm using this package. But I have an issue: github.com/mtiziano/drop_cap_text/issues/14 – Elasticity

Answer 2

You can use RichText.

                  RichText(
                      textAlign: TextAlign.start,
                      overflow: TextOverflow.ellipsis,
                      text: TextSpan(
                        children: [
                          WidgetSpan(
                            child: Image.asset(
                              "assets/images/loyalty_icon.png",
                              width: 100,
                              height: 100,
                              fit: BoxFit.contain,
                            ),
                          ),
                          TextSpan(
                            text:
                                "loreum ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec odio nec nisl tincidunt tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec odio nec nisl tincidunt tincidunt.",
                            style: theme.textTheme.bodyLarge,
                          ),
                        ],
                      ))

Panta

Answer 3

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')
    ],)

Freeliving

Apologies, I should have been clearer. This will have a fixed width and the text will also need to go flow below the image. – Cognizant

This only put the text beside the image. By 'float', it means we want the text to flow below the image, when it has gone past the image's height, such as what we get on the web and on microsoft word. – Roundsman

Answer 4

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),
    ),
  ),

Storfer

This seems to make the text overlay the image rather than put the text to the side around the image. – Cognizant