Placeholder ShadInputFormField look like not centered

[hifiaz]

i use setup

    ShadApp.materialRouter(
      debugShowCheckedModeBanner: false,
      title: 'Feel Better',
      routerConfig: _router,
    );

but when use input placeholder look like not centered on vertical

       ShadInputFormField(
          id: 'name',
          label: const Text('What Happened'),
          placeholder: const Text('Meet My Dad'),
          controller: editingName,
          validator: (v) {
            if (v.length < 2) {
              return 'must be at least 2 characters.';
            }
            return null;
          },
        ),

[nank1ro]

Can you add a screenshot with something written instead? To see how the normal text aligns

[hifiaz]

@nank1ro you mean like this?

[nank1ro]

In which platform are you running?

[hifiaz]

@nank1ro i use macos emulator to run it

[nank1ro]

Hi @hifiaz I created a PR where I made some changes. I haven't reproduced the issue, but I'd like to check if the PR solves the problem you're facing. Can you try the branch and see if it works? Update the pubspec.yaml shadcn_ui dependency with this one:

shadcn_ui:
    git:
      url: https://github.com/nank1ro/flutter-shadcn-ui
      ref: fix/input-placeholder-alignment

[hifiaz]

@nank1ro looks good, but other issue, when i set maxlines ex: 5 hint not on start, any option to make it on left top?

[nank1ro]

Can you try the last update of the branch? flutter pub upgrade shadcn_ui should be enough. I added again the padding, so your initial issue may appear again. Let me know, in case you still see the issue, please share the code, in particular if you have points in the app where you change the decoration theme, or the input decoration. Give me also the output of flutter doctor -v

[hifiaz]

yes look like current issue appear again, but all good for now

[nank1ro]

Try putting the text "Meet my dad" in the placeholder, then try writing it the same, does the position change or is it the same? If you can make a video it would help.

Give me also the output of flutter doctor -v because I'm not able to reproduce your issue.

[Dredayduncan]

I also had a similar issue. I noticed it only occurs when you specify the placeholder without an InputDecoration with a specified placeholderStyle.

[nank1ro]

@Dredayduncan can you provide me some simple and reproducible code? I'm not able to reproduce the issue

[Dredayduncan]

ShadInputFormField( placeholder: Text('Placeholder'), );

I noticed it also shows on the Form preview example on the documentation website. It's minute but the placeholder is closer to the bottom of the input field.

[nank1ro]

ShadInputFormField( placeholder: Text('Placeholder'), );

I noticed it also shows on the Form preview example on the documentation website. It's minute but the placeholder is closer to the bottom of the input field.

I still can't notice the problem, the light blue color is the padding and it's equal on top and bottom, however you can easily change the position of the text and placeholder changing the padding, for example:

ShadInputFormField(
 padding: const EdgeInsets.only(
  top: 8,
  left: 12,
  right: 12,
  bottom: 9, // or whatever value you want
 ),
),

[nank1ro]

I probably figured out what you meant. I updated the baseline of the text styles and now the text looks more centered.

Consider opening a new issue if you experience again the same problem