CODEWITHSUNDEEP
flutterflutter-layout
Eman Fateen
Eman Fateen

Reputation: 941

How to change cursor color in flutter

Dears, I have 2 qestions in flutter If you don't mind.

1- How to change the color of the cursor as it default blue and I don't like it

2- how can I make the text at the bottom of the screen whatever the screen size. ??

Thank you in advance.

enter image description here

Upvotes: 60

Views: 57012

Answers (7)

Adam Noor
Adam Noor

Reputation: 139

You can use

 textSelectionTheme: const TextSelectionThemeData(
  cursorColor: Color(0xff0469a8),
  selectionHandleColor: Color(0xff0469a8),
),

this in your ThemeData to set Cursor and handle color.

Upvotes: 0

Felipe Sales
Felipe Sales

Reputation: 1149

Flutter has been updated, and now the cursorColor is used like this:

ThemeData(
  ...
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Colors.blue, //thereby
  ),
),

Upvotes: 24

OliverTester
OliverTester

Reputation: 399

For question 1 you can set the cursorColor for theme attribute when calling MaterialApp like the below

new MaterialApp(
  title: "Flutter App",
  theme: ThemeData(
    cursorColor: Colors.red,
    home: HomeScreen(),
)

Upvotes: 15

Syed
Syed

Reputation: 16543

This works fine in both iOS and Android:

TextField(cursorColor: Colors.white)

But, if you like to set it in theme then

SOLUTION 1 - Original answer, recently not tested, also, seems it's deprecated:

I found the solution here:

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

MaterialApp(
  title: "Rate your Colleagues",
  theme: ThemeData(
    // for iOS
    cupertinoOverrideTheme: CupertinoThemeData(
      primaryColor: Colors.red,
    ),
    // for others(Android, Fuchsia)
    cursorColor: Colors.red,
    home: SplashScreen(),
  );
  ...

SOLUTION 2 - edited answer - not tested - please give credit to @i4guar

I found the solution here:

MaterialApp(
  title: "Rate your Colleagues",
  theme: ThemeData(
     textSelectionTheme: TextSelectionThemeData(
        cursorColor: darkPrimarySwatchColor,
        selectionColor: darkPrimarySwatchColor,
        selectionHandleColor: darkPrimarySwatchColor,
     ),
   ),
   home: SplashScreen(),
 );

Upvotes: 64

i4guar
i4guar

Reputation: 677

cursorColor is now deprecated for ThemeData use this instead (works on both iOS and android):

MaterialApp(
  title: "Rate your Colleagues",
  theme: ThemeData(
     textSelectionTheme: TextSelectionThemeData(
        cursorColor: darkPrimarySwatchColor,
        selectionColor: darkPrimarySwatchColor,
        selectionHandleColor: darkPrimarySwatchColor,
     ),
   ),
   home: SplashScreen(),
 );

Upvotes: 27

suztomo
suztomo

Reputation: 5202

I had to set useTextSelectionTheme to true and set textSelectionTheme for my custom dark theme:

ThemeData _defaultDarkTheme = ThemeData.dark();

ThemeData _darkTheme = initializeDefaultLineHeight(ThemeData(
    brightness: Brightness.dark,
    // How to set cursor color for TextFormField
    useTextSelectionTheme: true,
    textSelectionTheme: _defaultDarkTheme.textSelectionTheme.copyWith(
        cursorColor: Colors.grey[600]),

Upvotes: 4

Brinda Rathod
Brinda Rathod

Reputation: 2903

put cursorColor: Colors.white, inside the TextFormField

Upvotes: 74

Related Questions