Add labelText over BoxDecoration for Container (as TextField)


TextField has a nice way of placing a text label over its box decoration.



        onTap: onTap,
        controller: controller,
        decoration: InputDecoration(
          labelText: "XP",
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(50.0),

Is there way to achieve the same for other BoxDecoration for a Container? For example, I’d like to specify the label “XP”:

          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            border: Border.all(color: color, width: 2.0),
            labelText: Text("XP"),   // No such attribute
          child: child,

… but Flutter doesn’t provide labelText for BoxDecoration (only for InputDecoration).


How to add a MabelText over BoxDecoration for Container like a TextField:

Came across this and figured it might help.
Use the TextField and set the readOnly to ‘True’;
// This will disable the tap feature leaving the user unable to change the items within but you can display the results as needed.

In my example, I have the results set in the stateless widget to return the results from a method.

class TextField_resultBx extends StatelessWidget {
  const TextField_resultBx({
    Key? key,
    required this.boxResultTitle,
    required this.borderLabelTextBox,
    required this.displayBoxResult,
  }) : super(key: key);

  final String boxResultTitle;
  final String borderLabelTextBox;
  final String displayBoxResult;

  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
            textScaleFactor: 1.2,
            softWrap: true,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
          const SizedBox(height: 10),
          // Results Box 1:
            // enabled: true,
            readOnly: true,
            style: const TextStyle(
              color: kCalLabelColor,
            decoration: InputDecoration(
              enabled: true,
              contentPadding: const EdgeInsets.all(12.0),
              floatingLabelBehavior: FloatingLabelBehavior.always,
              // Border Label TextBox 1
              labelText: borderLabelTextBox,
              labelStyle: const TextStyle(
                fontWeight: FontWeight.bold,
                color: kCalLabelColor,
              hintText: displayBoxResult,

              hintMaxLines: 2,
              hintStyle: const TextStyle(
              enabledBorder: OutlineInputBorder(
                borderSide: kEnbBorderSide,
                borderRadius: kCalOutlineBorderRad,
              focusedBorder: kFocusedBorder,

Container label Text similar to Textfield labels

Answered By – Daniel

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *