Flutter text around image

by

Flutter Text around Image

In Flutter, you can easily place text around an image using various layout widgets. One common approach is to use the Wrap widget to achieve this effect. Let’s see how it can be done with detailed examples.

Example 1: Text next to an Image

In this example, we will place text next to an Image using the Wrap widget along with the Row widget.
Here’s the code for achieving this: 

    
Wrap(
  children: [
    Image.asset('assets/image.jpg', width: 100, height: 100),
    SizedBox(width: 10),
    Expanded(
      child: Text(
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu mollis odio.',
        style: TextStyle(fontSize: 16),
      ),
    ),
  ],
)

In the above code, we have placed an image using the Image.asset widget. Adjust the width and height as per your needs.
Then, we used a SizedBox widget with a width of 10 to create some spacing between the image and text.
Finally, the text is wrapped in an Expanded widget to allow it to take up any remaining space in the row.

Example 2: Text wrapped around an Image

In this example, we will wrap text around an image using the Wrap widget and controlling the alignment of each element within the wrap.
Here’s the code for achieving this effect: 

    
Wrap(
  alignment: WrapAlignment.spaceAround,
  children: [
    Image.asset('assets/image.jpg', width: 200, height: 200),
    SizedBox(width: 20),
    Text(
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu mollis odio.',
      style: TextStyle(fontSize: 16),
    ),
  ],
)

In the above code, we have set the alignment property of the Wrap widget to WrapAlignment.spaceAround which will allow the text to wrap and create space around the image.
We have also added a SizedBox widget with a width of 20 to create some spacing between the image and text.

Conclusion

Using the Wrap widget, you can easily place text around an image in Flutter. You can control the positioning and alignment of each element within the wrap to achieve the desired effect.

Leave a comment