Flutter WebView：如果没有互联网显示不同的内容

发布于 2025-02-08 21:45:50 字数 891 浏览 1 评论 0原文

我有一个Flutter Web View应用程序。我想拥有一个带有文本的离线屏幕和“重试”按钮。

如果没有Internet连接（实时无需刷新并单击以检查连接），一旦他丢失了连接，请用文本显示屏幕，然后重试按钮。然后，如果连接成功地将用户带回他所在的页面。

我当前的主人员：

import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

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

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        toolbarHeight: 0,
      ),
      body: const WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://google.com',
      ),
    );
  }
}

原文

I have a flutter web view app. I would like to have an offline screen with text and the button "try again".

If there is no internet connection (in real-time, no need to refresh and click to check connection), once he lost connection, show the screen with text and try again button. Then if the connection is successfully get the user back to the page where he was.

My current main.dart:

import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

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

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        toolbarHeight: 0,
      ),
      body: const WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://google.com',
      ),
    );
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凝望流年 2025-02-15 21:45:50

使用 webview_flutter package，依靠 onwebresourceError 您可以做类似的事情：

controller = WebViewController()
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (error) {
            if (error.errorType == WebResourceErrorType.hostLookup) {
              setState(() {
                internetDisconnected = true;
              });
            }
          },
        ),
      )
      ..loadRequest(Uri.parse(state.url));

然后有条件地显示您的“ Internet”内容：

 !internetDisconnected
                    ? WebViewWidget(
                        controller: controller,
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SvgPicture.asset(
                              "no_signal.svg",
                              width: MediaQuery.sizeOf(context).width / 2,
                            ),
                            const SizedBox(height: 20),
                            Text(
                              "no network",
                              style: largerText,
                            ),
                          ],
                        ),
                      )

有关更多信息
：

Using webview_flutter package, relying on onWebResourceError you could do something like:

controller = WebViewController()
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (error) {
            if (error.errorType == WebResourceErrorType.hostLookup) {
              setState(() {
                internetDisconnected = true;
              });
            }
          },
        ),
      )
      ..loadRequest(Uri.parse(state.url));

and then conditionally show your "no internet" content:

 !internetDisconnected
                    ? WebViewWidget(
                        controller: controller,
                      )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SvgPicture.asset(
                              "no_signal.svg",
                              width: MediaQuery.sizeOf(context).width / 2,
                            ),
                            const SizedBox(height: 20),
                            Text(
                              "no network",
                              style: largerText,
                            ),
                          ],
                        ),
                      )

For more info: WebResourceErrorType.hostLookup

回复收藏 0 原文

灵芸 2025-02-15 21:45:50

您可以使用Internet连接检查器之类的软件包。示例 this
一。并检查互联网状态

bool result = await InternetConnectionChecker().hasConnection;
if(result == true) {
 return Webview();
} else {
 print('No internet :( Reason:');
 return Center(
  child: Text(" no internet"),
 );
}

You can use a package like internet connection checker. Example this
One. And check for internet status like

bool result = await InternetConnectionChecker().hasConnection;
if(result == true) {
 return Webview();
} else {
 print('No internet :( Reason:');
 return Center(
  child: Text(" no internet"),
 );
}

回复收藏 0 原文

~没有更多了~