CODEWITHSUNDEEP
androidflutterdart
keenlabi
keenlabi

Reputation: 331

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

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?

Upvotes: 1

Views: 2142

Answers (3)

Madhav Kumar
Madhav Kumar

Reputation: 1114

enter image description here

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

Upvotes: 3

Payam Zahedi
Payam Zahedi

Reputation: 855

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

Upvotes: 2

Vitor
Vitor

Reputation: 840

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

Upvotes: 1

Related Questions