Issue
TextField has a nice way of placing a text label over its box decoration.
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,
),
),
],
),
);
}
}
Answered By - Daniel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.