labelStyle property

The style to use for InputDecoration.labelText when the label is on top of the input field.

If labelStyle is a WidgetStateTextStyle, then the effective text style can depend on the WidgetState.focused state, i.e. if the TextField is focused or not.

When the InputDecoration.labelText is above (i.e., vertically adjacent to) the input field, the text uses the floatingLabelStyle instead.

If null, defaults to a value derived from the base TextStyle for the input field and the current Theme.

Specifying this style will override the default behavior of InputDecoration that changes the color of the label to the InputDecoration.errorStyle color or ColorScheme.error.

It's possible to override the label style for just the error state, or just the default state, or both.

In this example the labelStyle is specified with a WidgetStateProperty which resolves to a text style whose color depends on the decorator's error state.

{@macro material_ui.dartpad_guide}

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [InputDecorator].

void main() => runApp(const LabelStyleErrorExampleApp());

class LabelStyleErrorExampleApp extends StatelessWidget {
  const LabelStyleErrorExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('InputDecorator Sample')),
        body: const Center(child: InputDecoratorExample()),
      ),
    );
  }
}

class InputDecoratorExample extends StatelessWidget {
  const InputDecoratorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        labelText: 'Name',
        // The WidgetStateProperty's value is a text style that is orange
        // by default, but the theme's error color if the input decorator
        // is in its error state.
        labelStyle: WidgetStateTextStyle.resolveWith((Set<WidgetState> states) {
          final Color color = states.contains(WidgetState.error)
              ? Theme.of(context).colorScheme.error
              : Colors.orange;
          return TextStyle(color: color, letterSpacing: 1.3);
        }),
      ),
      validator: (String? value) {
        if (value == null || value == '') {
          return 'Enter name';
        }
        return null;
      },
      autovalidateMode: .always,
    );
  }
}

Implementation

InputDecoration class