CODEWITHSUNDEEP
fluttercolorsflutter-layouttextfieldtextformfield
Esmaeil Alkhazmi
Esmaeil Alkhazmi

Reputation: 31

How can I change the color of that purple thing?

How can I change the color of that purple thing? enter image description here

Upvotes: 1

Views: 4053

Answers (6)

Mehran Turna
Mehran Turna

Reputation: 236

if you want to totally get rid of this just use

    theme: ThemeData(
          useMaterial3: false,

        ),

Upvotes: 0

Soufiane Bamou
Soufiane Bamou

Reputation: 36

Here is the right answer

The selectionHandleColor is the parameter that you must add and change according to your desired color

MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.grey,
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Colors.black,
          selectionHandleColor: Colors.grey,
          selectionColor: Color.fromARGB(255, 233, 232, 232),
        ),
      )),

Upvotes: 1

Abdelrahman M. Elmarakby
Abdelrahman M. Elmarakby

Reputation: 699

To change this globally you should do this
In the last updates in flutter the primaryswatch would take a MaterialColor not a Color so I worte a extension on Color to convert a color to material color


extension SuiizColors on Color {
  /// Returns a [MaterialColor] from a [Color] object
  MaterialColor getMaterialColorFromColor() {
    final colorShades = <int, Color>{
      50: ColorsManager.getShade(this, value: 0.5),
      100: ColorsManager.getShade(this, value: 0.4),
      200: ColorsManager.getShade(this, value: 0.3),
      300: ColorsManager.getShade(this, value: 0.2),
      400: ColorsManager.getShade(this, value: 0.1),
      500: this, //Primary value
      600: ColorsManager.getShade(this, value: 0.1, darker: true),
      700: ColorsManager.getShade(this, value: 0.15, darker: true),
      800: ColorsManager.getShade(this, value: 0.2, darker: true),
      900: ColorsManager.getShade(this, value: 0.25, darker: true),
    };
    return MaterialColor(value, colorShades);
  }
}

the code for the getShade method is


static Color getShade(Color color, {bool darker = false, double value = .1}) {
    assert(value >= 0 && value <= 1, 'shade values must be between 0 and 1');

    final hsl = HSLColor.fromColor(color);
    final hslDark = hsl.withLightness(
      (darker ? (hsl.lightness - value) : (hsl.lightness + value))
          .clamp(0.0, 1.0),
    );

    return hslDark.toColor();
  }

finally you can add you need to add your primary swatch and your color scheme to delete this


 primarySwatch: ColorsManager.primary.getMaterialColorFromColor(),
    colorScheme: ColorScheme.fromSwatch(
        primarySwatch: Colors.transparent.getMaterialColorFromColor(),
        accentColor: ColorsManager.accent,
        backgroundColor: ColorsManager.white,
        brightness: Brightness.light,
        cardColor: ColorsManager.offWhite,
        errorColor: ColorsManager.error),

sorry for the long answer but it's better in my opinion

Upvotes: 0

Cr2do
Cr2do

Reputation: 31

You have two possibilities:

  • Change it in all your code. In your main file change it like this :
return MaterialApp(
  title: 'Demo',
  theme: ThemeData(
    primarySwatch: Colors.orange, // Or another color
  ),
  home: Home() // Your home page,
);
  • Change it in this part only
TextField( cursorColor: Colors.orange) // or another color

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14865

This Color depends on your Theme Color, try the below code, I hope it helps you :

TextField(cursorColor: Colors.red)//change color your need

Upvotes: 2

Benyamin
Benyamin

Reputation: 1154

In your TextField, specify the cursorColor property, like this:

TextField(
...
// put here the color you want
cursorColor: Colors.green
)

Upvotes: 0

Related Questions