Logo

dev-resources.site

for different kinds of informations.

Fix: physical keyboard can't type in Flutter's Webview

Published at
8/9/2021
Categories
flutter
webview
dart
Author
bitecode
Categories
3 categories in total
flutter
open
webview
open
dart
open
Author
8 person written this
bitecode
open
Fix: physical keyboard can't type in Flutter's Webview

Problem

We are using a webview for our app built with Flutter (version 2.2.3). The main part code like this:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Keyboard Test')),
        body: WebView(
          initialUrl: 'https://duckduckgo.com',
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

When our iOS device connects to a bluetooth physical keyboard and open the app, inside the input box, the keyboard doesn't work, can't type anything.

Solution

This seems a Flutter bug (view the discussion here), and it looks like it has been fixed in the master branch, but hasn't been released to stable. At the time of writing this, the latest Flutter stable version is 2.2.3, so the later version might fix this issue.

But if you want to fix it now w/o waiting for the new version release, here is a temporary solution:

Go to your project folder: "ios > Runner > AppDelegate.swift", then simply add these code to that file:

extension FlutterViewController {
    open override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        super.pressesBegan(presses, with: event)
    }

    open override func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        super.pressesEnded(presses, with: event)
    }

    open override func pressesCancelled(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        super.pressesCancelled(presses, with: event)
    }
}
Enter fullscreen mode Exit fullscreen mode

Recompile your app, the problem should be fixed.

Reference

webview Article's
30 articles in total
Favicon
A New Era of Cross-Platform Desktop Application Development in Go Language: A Comprehensive Analysis of LCL, CEF, and Webview
Favicon
Building Document PDF Scanner for Windows, Android and iOS with .NET MAUI Blazor
Favicon
Webview em QML (Qt Modeling Language)
Favicon
Switching from .NET MAUI Blazor to WebView Control for Document Scanning
Favicon
Developing a Desktop Document Scanner Application with .NET MAUI Blazor
Favicon
Is there any fix in react native which I can apply for upi payment using react-native-webview?
Favicon
Notification List - inbox list Webview
Favicon
Android WebView: Handle special Intent URI requests
Favicon
Chrome extensions in WebView2, CefSharp, and DotNetBrowser
Favicon
It is possible to build a full-featured browser using react-native.
Favicon
React Native WebView: Make Android pullToRefresh work without any glitches
Favicon
8 Tips for Creating a Native Look and Feel in Tauri Applications
Favicon
How to Add CanvasJS Charts to your Android App?
Favicon
WebView Callback response in Flutter
Favicon
What is a WebView And How To Test It?
Favicon
Aplikasi WebView Pro (Convert Web ke Apk)
Favicon
Creating a GO GUI with Alpine.js and Webview
Favicon
WKWebView persistent cookies open source solution and other useful things for WKWebView
Favicon
Download PDF files to device storage with React Native Webview
Favicon
Fix: physical keyboard can't type in Flutter's Webview
Favicon
ERR_CLEARTEXT_NOT_PERMITTED from Android WebView
Favicon
Append a new User-Agent to WebView in Android
Favicon
Which Embed Browser engine to use?
Favicon
Interaction between Vue JS Webview and native Apps
Favicon
Flutter둜 μ›Ήμ•± λ§Œλ“€λ©° μ§„ν–‰ν–ˆλ˜ 정리 (1)
Favicon
Generate Right Big Arrow 👲 with CSS for Local Webview
Favicon
VsCode extension using webview and message posting
Favicon
React Native WebView debugging
Favicon
Proton Native
Favicon
WebView Apps on your OS

Featured ones: