Flutter - Displaying inline/embedded image from a String

Question

In Dart/Flutter, I have a String as such:

String myString = "Hello there here is the form: path/to/asset/image"

Is there any way I can have the String show that asset image listed when it is rendered within a widget?

I know WebView exists and that I may be able to have that image as a URL instead of an asset image, which should show it inline; however, only a handful of these Strings will have images attached so I'm not sure if that's the best route.

Further, what if I had two image paths within one String?

I've searched and possibly found WebView as a solution or maybe the package flutter_html, but I'm not seeing any other solutions for what I'm asking.

Any other approaches you can toss my way? Thanks.

Ahmed Mohammed · Answer 1 · 2021-01-16T13:10:40.110

You can use Regex to detect the link

for example: Regular expression to find URLs within a string

use replaceAll() or replaceFirst() method to remove the link from your string, and use it to render the image

Edit:

Detailed Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final list = [
    "My string https://github.com/plibither8/vscode-remove-comments/raw/master/assets/remove-comments.gif",
    "Second String https://www.justinguitar.com/images/profile-pix/JustinGuitar-001-400w.jpg"
  ];

  final regexp = RegExp(
      r'(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test render image from string"),
      ),
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          final item = list[index];

          // Find matching url
          final url = regexp.stringMatch(item);

          // Extract title by replacing url with empty String
          final title = item.replaceFirst(url, "").trim();

          return ListTile(
            leading: Image.network(url),
            title: Text(title),
          );
        },
      ),
    );
  }
}

You should provide a complete solution with a code example. As is, your answer does not help much, it about getting a url from a string, but does not cover the rendering part. — Gabriel Glenn, Jan 15 '21 at 07:34

score 0 · Answer 2 · answered Jan 15 '21 at 05:52

0

If you want to show an image next to the text than why you want to include an image inside a string when you can to it using Row() widget

Row(
    children: [
       Text("Hello there here is the form:"),
       SizedBox(
            width: 8,
       ),
       Image.asset("path/to/asset/image"),
     ],
   )

answered Jan 15 '21 at 05:52

Aakash kondhalkar

600
4
11

I'm ListView.building lists of hundreds of items and some of them have image references within their Strings that I was trying not to hardcode in – Sludge Jan 15 '21 at 14:03
if your string contains text as well as image reference then you need to split them using substring function **for example** String myString = "Hello there here is the form: path/to/asset/image"; String text = myString.substring(myString .lastIndexOf(":")+1).trim(); String image = myString.substring(0, myString .indexOf(":")+1).trim(); – Aakash kondhalkar Jan 16 '21 at 05:49

Flutter - Displaying inline/embedded image from a String

2 Answers2