Flutter Web - 如何检查互联网连接？
[英]Flutter Web- How to check internet connectivity?
问题描述
For mobile apps connectivity plugin is working fine.
对于移动应用程序连接插件工作正常。
import 'package:connectivity/connectivity.dart';
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
// I am connected to a mobile network.
} else if (connectivityResult == ConnectivityResult.wifi) {
// I am connected to a wifi network.
}
But is there is any way to detect internet connectivity on onPressed of button in Flutter web?但是有没有什么方法可以检测 Flutter web 中onPressed按钮上的互联网连接？
4 个解决方案
解决方案1
2 2020-01-07 15:39:30
maybe you can use html library也许你可以使用 html 库
import 'dart:html' as html;
html.window.navigator.connection
you can checkout and play with this object你可以结帐和玩这个对象
解决方案2
0 2019-12-28 07:16:29
You can create a method, call that method on click of a button or widget您可以创建一个方法，单击按钮或小部件时调用该方法
Sample code示例代码
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
Future<bool> getStatus() async {
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
debugPrint("network available using mobile");
return true;
} else if (connectivityResult == ConnectivityResult.wifi) {
debugPrint("network available using wifi");
return true;
} else {
debugPrint("network not available");
return false;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Connectivity Demo'),
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(32.0),
child: Column(
children: <Widget>[
GestureDetector(
onTap: () {
Future<bool> status = getStatus();
// now you can use status as per your requirement
},
child: Text("Get Internet Status"),
)
],
),
),
),
);
}
}
解决方案3
0 2019-12-28 15:57:39
to check network Connectivity in flutter for web use this plugin使用这个插件检查颤振中的网络连接
https://pub.dev/packages/network_state https://pub.dev/packages/network_state
to check network Connectivity your code looks like检查网络连接你的代码看起来像
NetworkState.startPolling();
final ns = new NetworkState();
ns.addListener(() async {
final hasConnection = await ns.isConnected;
});
解决方案4
0 2021-10-26 12:07:14
flutter web internet check.扑网络互联网检查。
if you want to check the internet connection on index.html .如果您想检查index.html上的互联网连接。
Type 1:类型 1：
<script>
var isOnline = navigator.onLine
</script>
if you want to check via listener then do like this.如果你想通过监听器检查，那么就这样做。
Type 2:类型 2：
<script>
var isOnline = navigator.onLine
window.addEventListener('online', function () {
this.isOnline = true
var x = document.getElementById("noInternet")
x.style.display = "none"
console.log('Became online')
})
window.addEventListener('offline', function () {
this.isOnline = false
var x = document.getElementById("noInternet")
x.style.display = "block"
console.log('Became offline')
})
function checkConnection() {
if (isOnline) {
var x = document.getElementById("noInternet")
x.style.display = "none"
}
else {
var x = document.getElementById("noInternet")
x.style.display = "block"
}
}
</script>
<body onload="checkConnection()">
<div class="centerPosition" id="noInternet">
<img src="cloud.png">
<h1>Uh-oh! No Internet</h1>
<h3>Please check your connection and try again</h3>
<button class="button buttonInternetConnection " onclick="checkConnection()">Try again</button>
</div>
</body>
Type 3:类型 3：
check internet connection in dart file:检查 dart 文件中的互联网连接：
import 'dart:html'; //Important to add this line
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Connectivity example app'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
print("Connection Status:${window.navigator.onLine}"); //Important to add this line
},
child: Text('Check Connection'))),
);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.