CODEWITHSUNDEEP
flutterdartmobile
olayemii
olayemii

Reputation: 600

How to make html in HTML() widget selectable

I have a flutter blog application, and i am using this package to render the blog HTML content, I want this content to be selectable, I know of the SelectableText() widget, but this cant be used to render HTML.

Anyone has an idea how I can make my HTML text selectable from mobile?

Upvotes: 8

Views: 4401

Answers (4)

Mez
Mez

Reputation: 106

Just wrap it in SelectionArea().

For example:

SelectionArea(
  child: Html(
    data: '<p>Some data</p>',
  ),
);

The rendered html content will now be selectable.

The SelectableHtml() widget suggested by other answers has shortcomings as stated in their own docs on pub.dev and did not work well for me.

Upvotes: 5

JM Apps
JM Apps

Reputation: 180

Library flutter_html:

In code:

SelectableHtml(
     data: 'Your text with html tag',
);

Upvotes: 0

Gibreel Abdullah
Gibreel Abdullah

Reputation: 395

Edit - It is now possible without any workarounds. Use K.Amanov's answer.

I achieved this using flutter_markdown and html2md packages. Not an ideal solution as markdown doesn't support all html tags.

import 'package:html2md/html2md.dart' as html2md;
import 'package:flutter_markdown/flutter_markdown.dart';
...
...
MarkdownBody(
  selectable: true,
  data: html2md.convert(
    'Your HTML Text here',
    ),
),

Upvotes: 1

K.Amanov
K.Amanov

Reputation: 1638

Several hours ago, in flutter_html merged to master commit that solves this problem. Right not you can import plugin to your project like this:

flutter_html:
    git:
      url: git://github.com/Sub6Resources/flutter_html.git
      ref: master

Maybe for the time you are reading this post, the last changes will be published to pub.dev

Then, use SelectableHtml instead of Html:

SelectableHtml(
  data: menuButton.content ?? "",
  style: {
    "body": Style(
      margin: EdgeInsets.zero,
      color: Theme.of(context).primaryColor,
    ),
  },
  onLinkTap: (link, renderContext, map, element) async {
    if (link != null && link.isNotEmpty) {
      await launch(link);
    }
  },
)

Upvotes: 4

Related Questions