Search code examples
fluttermaterial-design

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
)
)

Solution

  • 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(),
        );
      }
    }