Give option to change color of text select cursor and objects or use app theme colors

[maxmitz]

Environment

Plugin version: 5.7.2+3

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F770820d darwin-arm64, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.80.2)
[✓] Connected device (5 available)
[✓] Network resources

Description

What you'd like to happen:

I would like to have the option to change the color of the cursor and this text selection thing color.

Alternatives you've considered:

I think it would be optimal to use the existing Theme of the app. I tried it. It did not work.

ThemeData(
useMaterial3: true,
textSelectionTheme: const TextSelectionThemeData(
cursorColor: Colors.black,
selectionColor: Colors.black,
selectionHandleColor: Colors.black,
),
colorScheme: const ColorScheme(
brightness: Brightness.light,
primary: Colors.black,
onPrimary: Colors.black,
secondary: Colors.black,
onSecondary: Colors.black,
error: Colors.black,
onError: Colors.black,
background: Colors.black,
onBackground: Colors.black,
surface: Colors.black,
onSurface: Colors.black,
))

Reproducible code

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

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

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

@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse('https://flutter.dev')),
)));
}
}

[github-actions]

👋 @maxmitz

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[chuvanhoang888]

+1

[felix0324324]

same problem, help : (

[marcelomoresco]

same problem :(

[kforjan]

Same problem.

[GCX-Monter]

You can change background and text color using CSS in code like this:

onLoadStop: (controller, url) async {
                        pullToRefreshController?.endRefreshing();
                        setState(() {
                          this.url = url.toString();
                          urlController.text = this.url;
                        });

                          await controller.evaluateJavascript(source: """
                              var style = document.createElement('style');
                                 style.type = 'text/css';
                                 style.innerHTML = `
                                  
                           ::selection {
                                  background: #ffb7b7;  /* Background color when selected */
                                  color: #000;  /* Text color when selected */
                                }
                        `;
                        document.head.appendChild(style);
                    """);

CSS and HTML standards do not provide the ability to change the color of text selection handles. This is because these user interface elements are controlled at the operating system and browser level, and cannot be changed with CSS.

[GCX-Monter]

I also found out that there is definitely a way to change the color of the pointers by configuring the code, but I haven't found it yet, as soon as I find a way to implement it, I'll write it here

[angeelm03dev]

Hello, has anyone been able to find the solution to this problem??

[waleedf112]

Hello, has anyone been able to find the solution to this problem??

I have found a solution, add this line in styles.xml file:

<item name="android:colorControlActivated">#FF2196F3</item>

[angeelm03dev]

Hello, has anyone been able to find the solution to this problem??

I have found a solution, add this line in styles.xml file:

<item name="android:colorControlActivated">#FF2196F3</item>

Thank you so much!! In the end I knew how to solve it. In fact, you need to edit the style.xml file, but I also found that it is important to add the following to the Gradle dependencies:

dependencies {
       //...
       implementation 'com.google.android.material:material:<version>'
       //...
}

Replace with the latest version of the plugin, which you can find here

The flutter_inappwebview package uses PlatformViews, which requires you to add Android's Material dependency if you want to enable Material Design.

I leave here the answer they gave me on Stackoverflow:
https://stackoverflow.com/questions/77989551/why-does-datepicker-in-flutter-inappwebview-look-old

Not only was it affecting me with the text selector but also with a DatePicker.