Add labelText over BoxDecoration for Container (as TextField)

Issue

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

out

with:

TextField(
        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”:

        Container(
          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).

Solution

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;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            boxResultTitle,
            textScaleFactor: 1.2,
            softWrap: true,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          // Results Box 1:
          TextField(
            // 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(
                color: Colors.black,
              ),
              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.