Close keyboard when tap outside the WebView input in flutter

Question

I'm working on this for more than 4hrs and am unable to make it through. What I'm trying to do is hide the keyboard when tapping outside the input focus area. Somehow the keyboard is unable to hide.

I tried all the possible answers on StackOverflow but was unable to find my solution.

Output: Keyboard persist even after search on google input

My Approach

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';
 
void main(){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Color(0xff1e2229)
  ));
   runApp(MyApp());
}

 
class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
            debugShowCheckedModeBanner: false,
            home:  Scaffold(
                       body:WebViewClass()        
                            ),
            );
  
  }
}
 
class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State {

  bool isLoading = false;

  final key = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
         onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(context);
            if (!currentFocus.hasPrimaryFocus) {
              currentFocus.unfocus();
            }
           },
        child: Scaffold(
                appBar: null,
                body: SafeArea(
                    child: IgnorePointer(
                      ignoring: isLoading,
                      child: Stack(
                        children: [
                          WebView(
                            initialUrl: 'https://google.com',
                            javascriptMode: JavascriptMode.unrestricted,
                            key: key,
                            onPageFinished: (value) {
                              setState(() {
                                isLoading = false;
                              });
                            },
                            onPageStarted: (value) {
                              setState(() {
                                isLoading = true;
                              });
                            },
                          ),
                          isLoading ? Container(
                            width: MediaQuery.of(context).size.width,
                            height: MediaQuery.of(context).size.height,
                            color: Colors.grey.withOpacity(0.5),
                            child: const Center(child: CircularProgressIndicator())  ,
                          ) : Container(),
                        ],
                      ),
                    )),));

  }
}

It would be great if someone guide me on a way to resolve this issue.

user_13974372 · Answer

Please use this code in initstate of stateful widget.

 if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();

user_13804634 · Answer

According to the new flutter webview documentation: Putting this piece of code inside the given full example will solve the keyboard dismiss the issue. Thanks to @khunt arpit

@override
   void initState() {
     super.initState();
         // Enable hybrid composition.
         if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
   }

Full example code:

 import 'dart:io';
 import 'package:webview_flutter/webview_flutter.dart';

 class WebViewExample extends StatefulWidget {
   @override
   WebViewExampleState createState() => WebViewExampleState();
 }

 class WebViewExampleState extends State {
   @override
   void initState() {
     super.initState();
         // Enable hybrid composition.
 if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
   }

   @override
   Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'https://flutter.dev',
     );
   }
 }

Close keyboard when tap outside the WebView input in flutter

2 Answers