I want to display some blurred effect behind the textfield but there is a strange render :

I set a red blur color for better seeing . Here is your NativeTextField with the blur :

Here the NativeTextField without blur :

Here is the Flutter text field with blur and the expected result :

The sample code for this bottom Row :

Align(
      alignment: Alignment.bottomCenter,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          ClipRect(
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
                child: Container(
                  color: ThemeProvider.instance.getBlurScaffoldColor(context),
                  padding: EdgeInsets.only(top: paddingChat, bottom: paddingChat),
                  child: SafeArea(
                    top: false,
                    child: Container(
                      height: chatHeight,
                    ),
                  ),
                )),
          ),
          SafeArea(
            top: false,
            child: Row(
              children: [
                Container(
                  height: chatHeight,
                  width: chatHeight,
                  margin: const EdgeInsets.only(left: 10, right: 10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      border: Border.all(color: chatColor, width: 0.8),
                      shape: BoxShape.circle),
                  child: GestureDetector(
                      onTap: () {
                        onCameraTap();
                      },
                      child: Icon(CupertinoIcons.camera_circle_fill,
                          color: chatColor, size: 35)),
                ),
                Expanded(
                  child: Platform.isAndroid
                      ? androidTextField()
                      : iosTextField(),
                ),
                Container(
                  margin: const EdgeInsets.only(left: 10, right: 10),
                  height: chatHeight,
                  width: chatHeight,
                  padding: const EdgeInsets.all(2),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      border: Border.all(color: chatColor, width: 0.8),
                      shape: BoxShape.circle),
                  child: GestureDetector(
                    //onTap: onGalleryTap,
                    child: FirstGalleryAsset(
                        width: chatHeight,
                        height: chatHeight,
                        circle: true),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );

I first wrapped the entire row as back drop filter child and then tried to put them into a stack to workaround in order to overlay widgets but no result ...

Native Text field :

NativeTextInput(
      returnKeyType: ReturnKeyType.send,
      cursorColor: ThemeProvider.colorApp1,
      textCapitalization: TextCapitalization.sentences,
      style: Theme.of(context).textTheme.bodyText1,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(chatHeight / 2),
          border: Border.all(color: chatColor, width: 0.8)),
      placeholderStyle: ThemeProvider.instance.getPlacerHolderStyle(),
      placeholder: 'message',
      //Localization.of(context)!.getText("write_new_message"),
      onSubmitted: (String? value) {
        print("submitted value : $value");
        if (value != null && value.trim().isNotEmpty) {
          sendNewMessage(value.trim());
          messagesViewModel.saveTyping(typing: false);
        }
      },
      keyboardAppearance: Theme.of(context).brightness,
      focusNode: focusNode,
      minLines: 1,
      maxLines: 3,
      onChanged: (value) {
        if (value.isNotEmpty) {
          messagesViewModel.saveTyping(typing: true);
        } else if (value.isEmpty) {
          messagesViewModel.saveTyping(typing: false);
        }
      },
      controller: textEditingController,
    );

Sorry for the code no runnable quickly I'm hard at work right now.

Could you help me fix this ? Thank you

First problem, when I'm closing the keyboard by touching outside the onSubmitted callback is fired and don't know why.

Second, when the field is empty, my place holder value is submitted :

placeholder: 'message',
onSubmitted: (String? value) {
  print("submitted value : $value");
},

Result

flutter: submitted value : message

Third, when I'm submitted the textfield config is not reset : ex : If I wrote 3 lines and submit the place holder is not printed again and the 3 lines config is remaining :

Thanks in advance

• Support for custom font name on iOS.
• Add Flutter 3 support

Originally I was using fontFamily to pass the font name, but there's some nuance to converting a font family to a font name and it's platform-specific to iOS. I'm passing fontName as a separate iOS option for now, so there's no ambiguity that the developer is expected to include weight information in the name.

Fixes https://github.com/henryleunghk/flutter-native-text-input/issues/33 Fixes https://github.com/henryleunghk/flutter-native-text-input/issues/37

First of all, thanks for the package! I'm glad it exists and appreciate your work.

The consistency in font styles is very important for me (and, perhaps, many others), so it would be very good to be able to customize them. I personally don't mind manually putting the required TTF in ios/android directories of projects where this plugin is used.

• Use attributedPlaceholder instead of editing the text in the UITextView. This allows the text to be shown when the field is selected.
• Avoid BoxConstraints errors when the max height is not valid.
• Updated the State to mutate the state object inside setState.
• Add files to .gitignore that should not be checked in to source control.

Fixes #29

Screen recording of built-in example:

https://user-images.githubusercontent.com/394889/159203300-75489b6d-dbae-4539-aae0-f36e9b10db54.mov

Screen recording of indjec/native-text-field demo:

https://user-images.githubusercontent.com/394889/159539620-787363af-1c3a-45db-8138-2eb15b52e22f.mp4

Hello and thanks for the updates on the package :)

It was nice to be able to to set the placeholderStyle with a specific TextStyle, rather than simply the color.
Is it possible to have it back ? Or add a placeHolderFonts property for example ? (that would allow to set anything we want from TextStyle fonts (size, family...)

Thanks !

This method FocusScope.of(context).requestFocus(focusNode); to keep focus when I press 'action button' make the keyboard moving down/up fast.

I tried this code on the TextField & CupertinoTextField and I think this is working much better :

" The cleanest approach would be to use onEditingComplete() with TextEditingController instead of onSubmitted(text). Refer below example.

  final _controller = TextEditingController();
  TextField(
       controller: _controller,
       padding: EdgeInsets.all(8),
       textInputAction: TextInputAction.send,
       placeholder: 'Type your message',
       onEditingComplete: (){
           if (_controller.text.isEmpty) return;

           sendMessage(_controller.text);
       },
  ),

"

Found on stackOverFlow.

Do you think you could try this with the native ?

I'm facing weird behavior using the place holder.

• It can be remove in loop
• It can be retrieved and sent with onSubmitted

Here is the behavior :

Thanks in advance for fix

Thanks for the package. Please add more parameters for customization as we could set in the native code :

In my case, Tint color , Return Key , Capitalization...

And from the CupertinoTextField :

• maxLines
• suffix widget
• prefix widget

In order to gain popularity for this library, it would be great to extend support for Android text input.

Do you foresee any challenges to include Android too?

im trying to achieve it also on Text Widget, planning to look like this:

its works only on the NativeTextInput but not on the Text Widget. Any idea how to make it work?

Here's a video from the iPhone Simulator:

https://user-images.githubusercontent.com/37193648/210152606-dfbd2768-c1da-4f92-bbf2-a0bb23057b5c.mov

The issue also persisted on my physical mobile (iPhone 11, iOS 16.2).

Details:

• I can double tap to bring up the iOS text input options menu.
• I can tap anywhere within the text input to change the cursor position.
• I can long press the keyboard spacebar and move my finger around to change the cursor position.
• But what I cannot do is press and hold my finger on the cursor and then move the cursor around

I would be very grateful if this could be fixed soon, otherwise the package isn't all-the-way native!

I wonder if there will be support for UITextInputMode. It could be very useful to specify emoji keyboard and also to remember the user's choice of input language in the app.

Thank you for the great project by the way!

Hi, thanks for the package !
seems like there is couple of issues i found :

1. when provide own controller, its not showing position of the cursor (controller.selection.base.offset) always show -1 value
2. if return key set as DefaultValue, creation a new line will set the cursor at the end of the text length , despite sometimes it works correctly , but in most cases behavior is wrong (when try to create a new line somewhere in the middle ).
3. and the last one : rebuild widget, which contains the Native Text Input widget not update the last one, i mean if there is any variable , which change the font size , for example, the build method gets called. but value inside the widget seems not update the font size. despite it changed .

You can have a line be partially visible if you're overflowing the container.

This video is based on the demo code in https://github.com/indjec/native-text-field

https://user-images.githubusercontent.com/394889/159553998-03b6b19b-12bf-4a68-acb7-e759470fe05e.mov

It seems to be some issue with the computation of _maxHeight.

In my testing, adding 13 to the value of maxLineHeight helped. Here's a code sample:

https://github.com/collinjackson/flutter-native-text-input/tree/padding-fix

After the change:

https://user-images.githubusercontent.com/394889/159556049-3f9d1689-bcba-4435-9826-c654abd99aee.mov

However, there are still problems if text overflows a line, as shown here:

https://user-images.githubusercontent.com/394889/160070603-d88650b7-1116-40c8-aa29-080444a829d6.mov

Related StackOverflow question