Jaffer Alfahdawi
Reputation: 25
How to change text selection colour on Android Flutter
I need help in changing text selection colour in Android Flutter as it's currently using the mainColor of the app (which is black).
As you can see the selection colour is the same as the text colour. Any help would be much appreciated. I tried everything but to no avail. I want to change the text selection colour to like blue or something similar. The code is shown below:
import 'package:musicofflinetemplate/services/IntentService.dart';
class AboutUsPage extends StatelessWidget {
final GlobalProvider? global;
AboutUsPage({@required this.global});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [
SizedBox(
height: 50,
),
Image(
image: AssetImage("assets/res/icon/icon.png"),
height: MediaQuery.of(context).size.width * 0.55,
),
Padding(
padding: EdgeInsets.only(left: 30, right: 40, top: 20, bottom: 10),
child: SelectableText(
global!.config.aboutText1!,
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 20, height: 1.6, fontWeight: FontWeight.w500),
/*textAlign: TextAlign.right,*/
),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 40, top: 20, bottom: 10),
child: SelectableText(
global!.config.aboutText2!,
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 20, height: 1.6, fontWeight: FontWeight.w500),
/*textAlign: TextAlign.end,*/
),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 40, top: 20, bottom: 10),
child: SelectableText(
global!.config.aboutText3!,
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 20, height: 1.6, fontWeight: FontWeight.w500),
/*textAlign: TextAlign.end,*/
),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 40, top: 20, bottom: 10),
child: SelectableText(
global!.config.aboutText4!,
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 20, height: 1.6, fontWeight: FontWeight.w500),
/*textAlign: TextAlign.end,*/
),
),
Padding(
padding: EdgeInsets.only(left: 30, right: 40, bottom: 20, top: 10),
child: Column(
children: [
Divider(),
Material(
color: Colors.transparent,
child: InkWell(
splashColor: global!.config.mainColor!.withOpacity(0.2),
child: ListTile(
leading: Icon(
Icons.info,
color: global!.config.mainColor,
),
title: Align(
alignment: Alignment(-1.1, 0),
child: Text(
"Version ${global!.packageInfo.versionNumber}",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w500)),
),
onTap: () {},
),
),
),
if (global!.config.enableFacebook! ||
global!.config.enableTwitter! ||
global!.config.enableWebsite!)
Column(
children: [
Divider(),
SizedBox(
height: 30,
),
Container(
width: MediaQuery.of(context).size.width,
child: Text("Connect with us",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
color: global!.config.mainColor))),
],
),
SizedBox(
height: 20,
),
if (global!.config.enableWebsite!)
Column(
children: [
Material(
color: Colors.transparent,
child: InkWell(
splashColor:
global!.config.mainColor!.withOpacity(0.2),
child: ListTile(
leading: Icon(
Icons.link,
size: 25,
color: global!.config.mainColor,
),
title: Align(
alignment: Alignment(-1.1, 0),
child: Text("Visit our website",
style: TextStyle(fontSize: 20)),
),
onTap: () async {
await IntentService.openUrl(
global!.config.website!);
},
),
),
),
Divider(),
],
),
if (global!.config.enableFacebook!)
Column(
children: [
Material(
color: Colors.transparent,
child: InkWell(
splashColor:
global!.config.mainColor!.withOpacity(0.2),
child: ListTile(
leading: Icon(Ionicons.logo_facebook,
size: 23, color: Color(0xff3b5998)),
title: Align(
alignment: Alignment(-1.1, 0),
child: Text("Like us on facebook",
style: TextStyle(fontSize: 20)),
),
onTap: () async {
await IntentService.openSocialUrl(
handler: global!.config.facebookHandler!,
type: 'facebook');
},
),
),
),
Divider(),
],
),
if (global!.config.enableTwitter!)
Column(
children: [
Material(
color: Colors.transparent,
child: InkWell(
splashColor:
global!.config.mainColor!.withOpacity(0.2),
child: ListTile(
leading: Icon(Ionicons.logo_twitter,
size: 23, color: Color(0xff00acee)),
title: Align(
alignment: Alignment(-1.1, 0),
child: Text("Follow us on twitter",
style: TextStyle(fontSize: 20)),
),
onTap: () async {
await IntentService.openSocialUrl(
handler: global!.config.twitterHandler!,
type: 'twitter');
},
),
),
),
],
),
],
),
)
],
),
);
}
}
Upvotes: -1
Views: 442
Answers (1)
NehaK
Reputation: 2727
You can use following :
https://flutter.dev/docs/release/breaking-changes/text-selection-theme
ThemeData(
cursorColor: Colors.red,
textSelectionColor: Colors.green,
textSelectionHandleColor: Colors.blue,
)
or
ThemeData(
textSelectionTheme: TextSelectionThemeData(
cursorColor: Colors.red,
selectionColor: Colors.green,
selectionHandleColor: Colors.blue,
)
)
ThemeData is your application's theme. and you can provide it like this :
In your MaterialApp :
child: MaterialApp(
theme: ThemeData(
textSelectionTheme: TextSelectionThemeData(
cursorColor: Colors.red,
selectionColor: Colors.green,
selectionHandleColor: Colors.blue,
),
),
builder: ............
Upvotes: 2
Related Questions
- How to change selected text color locally - flutter
- Change the Highlight Color of selected text
- Flutter - Change color of selected text in a Textfield
- Flutter: Change the selected text color
- How to change the color of the selected text of elevated button in Flutter?
- Set the color of selected text
- How to change the color of the TextField selection
- change the selected text color of the TextField flutter
- How do I change text selection handle color for iOS in Flutter?
- How can you change to color of the text in Flutter