How can i load an image in between a text in Flutter

Question

I need to display content containing text and images from an API on my android app, when I save it in a variable of type String, the texts get displayed but the images shows as url. How do I load the get the links to load in between the texts?

Answer 1

I needed to insert an Image inline with a sentence of texts. So for that I used this:

  final String paragraph1 =
  'Advanciti App is an app where you can study and make friends with people living near your home. Advanciti is an Edtech Startup based out of Pune, Maharashtra, India.\n';

 RichText(
          text: TextSpan(
            children: [
              TextSpan(text: "The "),
              WidgetSpan(child: Container(width: 20.0, child: Image.asset('assets/app_icon.png', scale: 1))),
              TextSpan(text: paragraph1),
            ],
          ),
        ),

Answer 2

if you want to show images you need to convert your data to HTML or Markdown. in MarkDown and HTML, you can show much more then the image. these are packages for HTML and MarkDown:

1. flutter_html
2. flutter_markdown

Answer 3

You can use the following to place an image between two texts vertically:

Column(
    children: <Widget>[
      Text("Hello"),
      Image.network(
          'REPLACE HERE WITH YOUR IMG URL'),
      Text("World")
    ],
  ),

or you can use this to place an image between two texts horizontally:

Row(
    children: <Widget>[
      Text("Hello"),
      Image.network(
          'REPLACE HERE WITH YOUR IMG URL'),
      Text("World")
    ],
  ),