🐛 TextBox border disappears
The darker bottom border of a TextBox changes its color when resizing the application window:
It sometimes even disappears completely:
This happens on desktop and web.
To reproduce
- Build the following minimal example
- Resize the app window vertically
import 'package:fluent_ui/fluent_ui.dart';
void main(List<String> args) {
runApp(FluentApp(
home: Container(
color: Colors.white,
child: const Center(child: WidgetWithTextBox()),
)));
}
class WidgetWithTextBox extends StatelessWidget {
const WidgetWithTextBox({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: //
// Uncomment this part to see the border disappear entirely
// Button(
// onPressed: () {
// showDialog(
// context: context,
// builder: (context) => ContentDialog(
// title: const Text("ContentDialog"),
// content: const TextBox(),
// actions: [
// Button(
// child: const Text("Action 1"),
// onPressed: () {},
// ),
// Button(
// child: const Text("Action 2"),
// onPressed: () {},
// ),
// ],
// ),
// );
// },
// child: const Text("Button"),
// ),
// Comment this part to see the border disappear entirely
TextBox(
placeholder: "TextBox",
),
);
}
}
The TextBox border is extremely thin, only 2 pixels. It's rather an issue with flutter resizing system than with fluent_ui. I don't think there is anything we can do to overcome this issue.
I see. Thanks for looking into it.
HI, I am running into the same issue.
To me it seems that the actual problem is when the TextBox does not have focus, in such case the border width is in fact set to 0 not to 2 (the focused TextBox border seems to be working well). I played around replacing the value with 1 and the overall rendering of the border was way better.