fluent_ui icon indicating copy to clipboard operation
fluent_ui copied to clipboard

🐛 TextBox border disappears

Open robkri opened this issue 2 years ago • 3 comments

The darker bottom border of a TextBox changes its color when resizing the application window: TextBox_Border

It sometimes even disappears completely: TextBox_Border2

This happens on desktop and web.

To reproduce

  1. Build the following minimal example
  2. 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",
      ),
    );
  }
}

robkri avatar Aug 23 '23 07:08 robkri

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.

bdlukaa avatar Aug 28 '23 17:08 bdlukaa

I see. Thanks for looking into it.

robkri avatar Sep 05 '23 13:09 robkri

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.

RemarkIt avatar Jul 10 '24 21:07 RemarkIt