floatingLabelStyle property

The style to use for InputDecoration.labelText when the label is above (i.e., vertically adjacent to) the input field.

When the InputDecoration.labelText is on top of the input field, the text uses the labelStyle instead.

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

If null, defaults to labelStyle.

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.

When the input field receives focus, the font size of InputDecoration.label is scaled down by 75%.

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

In this example the floatingLabelStyle 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 FloatingLabelStyleErrorExampleApp());

class FloatingLabelStyleErrorExampleApp extends StatelessWidget {
  const FloatingLabelStyleErrorExampleApp({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.
        floatingLabelStyle: 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