![Kiểm tra kết nối Internet trong Flutter - Hướng dẫn từng bước [2023]](https://ductuanmedia.com/wp-content/uploads/2024/12/Logo.png){kind=logo}
![Kiểm tra kết nối Internet trong Flutter – Hướng dẫn từng bước [2023]](https://ductuanmedia.com/wp-content/uploads/2023/07/flutter-internet-connection-checker-368x245.gif)
Kiểm tra kết nối Internet trong Flutter – Hướng dẫn từng bước [2023]
Trong quá trình phát triển ứng dụng Flutter, có thể bạn muốn kiểm tra trạng thái kết nối Internet. Có thể bạn muốn kiểm tra trước khi gọi API hoặc lắng nghe trạng thái/kênh kết nối Internet để thông báo cho người dùng biết về nó một cách chủ động. Vì vậy, trong bài hướng dẫn này, chúng ta sẽ xem qua hướng dẫn từng bước để triển khai kiểm tra kết nối Internet trong Flutter.
Kết quả sau khi thực hiện
Dưới đây là những điều chúng ta sẽ tìm hiểu:
- Cách kiểm tra kết nối Internet trong Flutter
- Các bước triển khai kiểm tra kết nối Internet trong Flutter
Cách kiểm tra kết nối Internet trong Flutter
Để kiểm tra kết nối Internet trong Flutter, bạn cần thêm plugin connectivity plus vào file pubspec.yaml và sau đó bạn có thể kiểm tra kết nối Internet bằng cách gọi thủ công phương thức checkConnectivity của nó hoặc lắng nghe các thay đổi kết nối mạng bằng cách gọi phương thức onConnectivityChanged.listen của nó.
Các bước triển khai kiểm tra kết nối Internet trong Flutter Dưới đây là những bước đơn giản để triển khai kiểm tra kết nối Internet trong Flutter:
Bước 1: Thêm plugin connectivity plus vào file pubspec.yaml.
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 intl: ^0.17.0 connectivity_plus: ^2.3.0 # <-- SEE HERE
Bước 2: Tạo một lớp singleton đảm nhận việc xử lý các phương thức liên quan đến mạng.
class NetworkConnectivity {
NetworkConnectivity._();
static final _instance = NetworkConnectivity._();
static NetworkConnectivity get instance => _instance;
final _networkConnectivity = Connectivity();
final _controller = StreamController.broadcast();
Stream get myStream => _controller.stream;
// 1.
void initialise() async {
ConnectivityResult result = await _networkConnectivity.checkConnectivity();
_checkStatus(result);
_networkConnectivity.onConnectivityChanged.listen((result) {
print(result);
_checkStatus(result);
});
}
// 2.
void _checkStatus(ConnectivityResult result) async {
bool isOnline = false;
try {
final result = await InternetAddress.lookup('example.com');
isOnline = result.isNotEmpty && result[0].rawAddress.isNotEmpty;
} on SocketException catch (_) {
isOnline = false;
}
_controller.sink.add({result: isOnline});
}
void disposeStream() => _controller.close();
}
Bước 3: Thêm các biến để lưu trữ loại kết nối và trạng thái của nó.
Map _source = {ConnectivityResult.none: false};
final NetworkConnectivity _networkConnectivity = NetworkConnectivity.instance;
String string = '';
Bước 4: Trong phương thức initState, khởi tạo lớp mạng và lắng nghe các thay đổi.
void initState() {
super.initState();
_networkConnectivity.initialise();
_networkConnectivity.myStream.listen((source) {
_source = source;
print('source $_source');
// 1.
switch (_source.keys.toList()[0]) {
case ConnectivityResult.mobile:
string =
_source.values.toList()[0] ? 'Mobile: Online' : 'Mobile: Offline';
break;
case ConnectivityResult.wifi:
string =
_source.values.toList()[0] ? 'WiFi: Online' : 'WiFi: Offline';
break;
case ConnectivityResult.none:
default:
string = 'Offline';
}
// 2.
setState(() {});
// 3.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
string,
style: TextStyle(fontSize: 30),
),
),
);
});
}
Bước 5: Xây dựng giao diện người dùng hiển thị kết nối Internet.
void initState() {
super.initState();
_networkConnectivity.initialise();
_networkConnectivity.myStream.listen((source) {
_source = source;
print('source $_source');
// 1.
switch (_source.keys.toList()[0]) {
case ConnectivityResult.mobile:
string =
_source.values.toList()[0] ? 'Mobile: Online' : 'Mobile: Offline';
break;
case ConnectivityResult.wifi:
string =
_source.values.toList()[0] ? 'WiFi: Online' : 'WiFi: Offline';
break;
case ConnectivityResult.none:
default:
string = 'Offline';
}
// 2.
setState(() {});
// 3.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
string,
style: TextStyle(fontSize: 30),
),
),
);
});
}
- Lưu trữ loại kết nối và trạng thái của nó
- Làm mới trang để cập nhật văn bản trạng thái kết nối.
- Hiển thị Snackbar với trạng thái kết nối mới nhất.
Bước 6: Hủy Stream.
@override
void dispose() {
_networkConnectivity.disposeStream();
super.dispose();
}
Dưới đây là toàn bộ mã:
import 'dart:async';
import 'dart:io';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class ConnectionCheckerDemo extends StatefulWidget {
const ConnectionCheckerDemo({Key? key}) : super(key: key);
@override
State<ConnectionCheckerDemo> createState() => _ConnectionCheckerDemoState();
}
class _ConnectionCheckerDemoState extends State<ConnectionCheckerDemo> {
Map _source = {ConnectivityResult.none: false};
final NetworkConnectivity _networkConnectivity = NetworkConnectivity.instance;
String string = '';
@override
void initState() {
super.initState();
_networkConnectivity.initialise();
_networkConnectivity.myStream.listen((source) {
_source = source;
print('source $_source');
// 1.
switch (_source.keys.toList()[0]) {
case ConnectivityResult.mobile:
string =
_source.values.toList()[0] ? 'Mobile: Online' : 'Mobile: Offline';
break;
case ConnectivityResult.wifi:
string =
_source.values.toList()[0] ? 'WiFi: Online' : 'WiFi: Offline';
break;
case ConnectivityResult.none:
default:
string = 'Offline';
}
// 2.
setState(() {});
// 3.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
string,
style: TextStyle(fontSize: 30),
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: const Color(0xff6ae792),
),
body: Center(
child: Text(
string,
style: TextStyle(fontSize: 54),
)),
);
}
@override
void dispose() {
_networkConnectivity.disposeStream();
super.dispose();
}
}
class NetworkConnectivity {
NetworkConnectivity._();
static final _instance = NetworkConnectivity._();
static NetworkConnectivity get instance => _instance;
final _networkConnectivity = Connectivity();
final _controller = StreamController.broadcast();
Stream get myStream => _controller.stream;
void initialise() async {
ConnectivityResult result = await _networkConnectivity.checkConnectivity();
_checkStatus(result);
_networkConnectivity.onConnectivityChanged.listen((result) {
print(result);
_checkStatus(result);
});
}
void _checkStatus(ConnectivityResult result) async {
bool isOnline = false;
try {
final result = await InternetAddress.lookup('example.com');
isOnline = result.isNotEmpty && result[0].rawAddress.isNotEmpty;
} on SocketException catch (_) {
isOnline = false;
}
_controller.sink.add({result: isOnline});
}
void disposeStream() => _controller.close();
}
Nguồn Flutter beads
