Question 248416 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I adjust the cursor size of a Material 3 TextField within a theme in Flutter?

Iam trying to globally set the cursor height of Material Textfield using ThemeData

When using the TextField widget you get accessed to a param "cursorHeight" that let’s you change the cursor height.

TextField(
  cursorHeight: 15,
);

The problem is I want to have this globally and I can’t figure out how to do that in ThemeData

I would like to do something like that

ThemeData(
  inputDecorationTheme: InputDecorationTheme(
   cursorHeight: 15
)
)
Tags:

2

Answers


  1. 0

    To globally set the cursor height of a TextField using ThemeData, you can create a custom InputDecorationTheme and apply it to your app’s theme. However, please note that cursorHeight is not a direct property of InputDecorationTheme. You’ll have to set it as a custom property and then handle it in your custom TextField widget.

    Here’s an example of how you can achieve this:

    
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          // Define any other input decoration properties here
        ),
        textSelectionTheme: TextSelectionThemeData(
          cursorHeight: 15, // Set the cursor height globally
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Cursor Height Example'),
      ),
      body: Center(
        child: MyTextField(), // Use your custom TextField widget
      ),
    );
  }
}

class MyTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        labelText: 'Custom Cursor Height',
      ),
    );
  }
}

    In this example, I’ve set the cursorHeight property in TextSelectionThemeData within the ThemeData. This will affect the cursor height for all TextField widgets in your app.

    Remember, you’ll need to wrap your TextField widgets in a Theme widget that provides this custom theme data for it to take effect.

    Keep in mind that this will affect all TextField widgets in your app. If you need to have different cursor heights for different parts of your app, you may need to handle it on a case-by-case basis or use more complex customizations.

    I hope this fixed your issue.

    Login or Signup to reply.
  2. 0

    The height of the cursor is determined by the fontSize of the TextStyle applied within the associated TextField. By default, this widget utilizes the titleMedium attribute of the TextTheme as its default style. If you customize the TextTheme property and, in particular, the fontSize attribute of the titleMedium TextStyle, the cursor’s height will adapt accordingly.

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          // Define any other input decoration properties here
        ),
        textTheme: TextTheme(titleMedium: TextStyle(fontSize: 12))
      ),
      home: MyHomePage(),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search