Flutter web_view Internet Connection Off Screen How to Create with image and refresh button also

Question

I create a Web_View app in Flutter.code ...

return Scaffold(
  body: Stack(
    children: [
      WebView(
        initialUrl: "https://artsify.in",
        javascriptMode: JavascriptMode.unrestricted,
      )
    ],
  ),
);

I Need like that ...

Please open this image link for demo i want

Answer 1

You need to use package for checking internet, i used internet_connection_checker:

class WebviewWidget extends StatefulWidget {
  const WebviewWidget({Key key}) : super(key: key);

  @override
  State<WebviewWidget> createState() => _WebviewWidgetState();
}

class _WebviewWidgetState extends State<WebviewWidget> {
  bool isOnline = true;
  void checkOnline() async {
    isOnline = await InternetConnectionChecker().hasConnection;
  }

  @override
  void initState() {
    checkOnline();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return isOnline
        ? const WebView(
            initialUrl: "https://artsify.in",
            javascriptMode: JavascriptMode.unrestricted,
          )
        : Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Ooops, connection lost"),
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        checkOnline();
                      });
                    },
                    child: const Text("Try again")),
              ],
            ),
          );
  }
}

You can use flutter_inappwebview to show webview too,

this package allows you to handle errors too, if you mind you can follow doc or follow this question to know how to do that