label property

Widget? label

Optional widget that describes the input field.

When the input field is empty and unfocused, the label is displayed on top of the input field (i.e., at the same location on the screen where text may be entered in the input field). When the input field receives focus (or if the field is non-empty), depending on floatingLabelAlignment, the label moves above, either vertically adjacent to, or to the center of the input field.

This can be used, for example, to add multiple TextStyle's to a label that would otherwise be specified using labelText, which only takes one TextStyle.

This example shows a TextField with a Text.rich widget as the label. The widget contains multiple Text widgets with different TextStyle's.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [InputDecoration.label].

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('InputDecoration.label Sample')),
        body: const LabelExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: TextField(
        decoration: InputDecoration(
          label: Text.rich(
            TextSpan(
              children: <InlineSpan>[
                WidgetSpan(child: Text('Username')),
                WidgetSpan(
                  child: Text('*', style: TextStyle(color: Colors.red)),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Only one of label and labelText can be specified.

Implementation

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/input_decorator/input_decoration.label.0.dart#body}
///
/// </callout-box>
///
/// Only one of [label] and [labelText] can be specified.
final Widget? label;