Support SelectionArea

[crizant-mpower]

When we wrap SelectionArea around a widget tree, all Text widgets in this widget tree are selectable. But the RichText widget used by this package needs some modification:

e.g.

RichText(
  // ...
  selectionRegistrar: SelectionContainer.maybeOf(context),
  selectionColor: Theme.of(context).textSelectionTheme.selectionColor ?? const Color(0xAF6694e8),
)

Source: https://api.flutter.dev/flutter/widgets/RichText-class.html

[desconexo]

Hi, I will on this. Unfortunately, I only have time tomorrow. If you can, open a PR to fix this issue and I will approve it.

[desconexo]

Hi. I can't make it work properly. Tried your suggestion, but it is still not working as it should. I don't know how to fix it, so I'll leave the issue open for the future.

[crizant-mpower]

I pulled the latest master branch and it's already working:

Here is the minimum demo snippet:

import 'package:flutter/material.dart';
import 'package:highlight_text/highlight_text.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SelectionArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextHighlight(
                text: 'You have pushed the button this many times:',
                textStyle: Theme.of(context).textTheme.bodyMedium,
                words: {
                  'button': HighlightedWord(
                    textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          backgroundColor: Colors.yellow,
                        ),
                  ),
                },
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

[crizant-mpower]

Oh, the only thing is that the selection color is not correct, it should be in purple in my case. 🤔

[crizant-mpower]

I created a PR, please check: https://github.com/desconexo/highlight_text/pull/43

[desconexo]

I can accept your PR, since it is about the color. Unfortunately, this doesn't work with the example app. I tried to do like you, but when I paste the text on other apps it is weirdly formatted

[desconexo]

By weirdly formatted I mean: spaces between highlighted words not showing, highlighted words not displaying in the correct position and things like that

[desconexo]

This is the text copied on example app: "Flutteropen-source is an mobile application development frameworkGoogle. It is used to develop applications for created by AndroidiOS, as well as being the primary method of creating applications for and GooFuchsia"

[crizant-mpower]

I can confirm that issue exists, I will try to look into that.

[crizant-mpower]

I believe this is a bug in the flutter SDK, filed an issue here: https://github.com/flutter/flutter/issues/127942

[jonnyjohnson1]

You can make RichText selectable by using Text.rich. You'll have to tweak the first named, text, parameter too when you do it.