CODEWITHSUNDEEP
flutter
Jianjian Yang
Jianjian Yang

Reputation: 1234

How do widgets cover keyboard in flutter

I want a widget cover the keyboard in flutter, like the recording button in Telegram.

I've tried some methods, but the widget was cropped by the keyboard.

enter image description here

Upvotes: 0

Views: 474

Answers (1)

Durdu
Durdu

Reputation: 4859

If you are building a 100% flutter project I don't think it is possible. Alternatively you can mix flutter and iOS to achieve this.

Here is why I don't think you can do it only with flutter:

To add something over the keyboard form the iOS side you need to access the windows array and add your custom view over the last window, thus making sure it is over the top most UI (the keyboard):

var customView = UIView(frame: CGRect(x: 0, y: self.view.frame.size.height-300, width: self.view.frame.size.width, height: 300))
customView.backgroundColor = UIColor.redColor()
customView.layer.zPosition = CGFloat(MAXFLOAT)
var windowCount = UIApplication.sharedApplication().windows.count
UIApplication.sharedApplication().windows[windowCount-1].addSubview(customView);

Your "100% flutter" will not have access to the resources described above.

In order to have this functionality I would have the the iOS project coordinating the situation a bit.

For example:

Have your flutter implement paths & channels.

Keep your main path for your current flutter implementation.

Add a new path for the view/widget that should be over the keyboard.

On the iOS side should should coordinate with the two flutter instances through channels. Have the iOS side informed when the view/widget should be displayed/removed (and additional stuff if needed, such as, the user tapping on the custom new view/widget).

Upvotes: 1

Related Questions