我如何使用 cubit 检查连通性?
how could i check connectivity using cubit?
我需要使用连接库检查应用程序中每个页面的连接性,
所以我将在供应商内部使用一个腕尺。问题是什么时候关闭流以便在用户关闭应用程序时可以处理它?
就像这样:
import 'package:connectivity/connectivity.dart';
@override
dispose() {
super.dispose();
subscription.cancel();
}
1.确保在 pubspec.yaml
.
中导入了 flutter_bloc
和 connectivity_plus
2。创建一个 InternetCubit 文件:
- internet_cubit.dart
- internet_state.dart
3。 internet_state.dart:
这里我们为我们的 cubit 和 cubit 状态创建了连接类型的枚举:
part of 'internet_cubit.dart';
enum ConnectionType {
wifi,
mobile,
}
@immutable
abstract class InternetState {}
class InternetLoading extends InternetState {}
class InternetConnected extends InternetState {
final ConnectionType connectionType;
InternetConnected({@required this.connectionType});
}
class InternetDisconnected extends InternetState {}
4。 internet_cubit.dart:
Cubit 依赖于连接插件,所以我们导入它并创建一个流订阅,以便能够对连接变化做出反应。
我们还定义了两个方法 emitInternetConnected
和 emitInternetDisconnected
来改变实际的肘位状态。
确保正确处理流订阅。
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:meta/meta.dart';
part 'internet_state.dart';
class InternetCubit extends Cubit<InternetState> {
final Connectivity connectivity;
StreamSubscription connectivityStreamSubscription;
InternetCubit({@required this.connectivity})
: assert(connectivity != null),
super(InternetLoading()) {
connectivityStreamSubscription =
connectivity.onConnectivityChanged.listen((connectivityResult) {
if (connectivityResult == ConnectivityResult.wifi) {
emitInternetConnected(ConnectionType.wifi);
} else if (connectivityResult == ConnectivityResult.mobile) {
emitInternetConnected(ConnectionType.mobile);
} else if (connectivityResult == ConnectivityResult.none) {
emitInternetDisconnected();
}
});
}
void emitInternetConnected(ConnectionType _connectionType) =>
emit(InternetConnected(connectionType: _connectionType));
void emitInternetDisconnected() => emit(InternetDisconnected());
@override
Future<void> close() {
connectivityStreamSubscription.cancel();
return super.close();
}
}
5.在您的应用程序主文件中创建一个 Connectivity
插件实例并将其传递给您的 BlocProvider
。根据您的需要设置消费群:
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_4/cubit/internet_cubit.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() => runApp(MyApp(connectivity: Connectivity()));
class MyApp extends StatelessWidget {
final Connectivity connectivity;
const MyApp({Key key, this.connectivity}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => InternetCubit(connectivity: connectivity),
child: MaterialApp(
title: 'Connectivity cubit',
home: Scaffold(
appBar: AppBar(
title: Text('Connectivity cubit spotlight'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder<InternetCubit, InternetState>(
builder: (context, state) {
if (state is InternetConnected &&
state.connectionType == ConnectionType.wifi) {
return Text(
'Wifi',
style: TextStyle(color: Colors.green, fontSize: 30),
);
} else if (state is InternetConnected &&
state.connectionType == ConnectionType.mobile) {
return Text(
'Mobile',
style: TextStyle(color: Colors.yellow, fontSize: 30),
);
} else if (state is InternetDisconnected) {
return Text(
'Disconnected',
style: TextStyle(color: Colors.red, fontSize: 30),
);
}
return CircularProgressIndicator();
},
),
],
),
),
),
),
);
}
}
我需要使用连接库检查应用程序中每个页面的连接性, 所以我将在供应商内部使用一个腕尺。问题是什么时候关闭流以便在用户关闭应用程序时可以处理它?
就像这样:
import 'package:connectivity/connectivity.dart';
@override
dispose() {
super.dispose();
subscription.cancel();
}
1.确保在 pubspec.yaml
.
flutter_bloc
和 connectivity_plus
2。创建一个 InternetCubit 文件:
- internet_cubit.dart
- internet_state.dart
3。 internet_state.dart:
这里我们为我们的 cubit 和 cubit 状态创建了连接类型的枚举:
part of 'internet_cubit.dart';
enum ConnectionType {
wifi,
mobile,
}
@immutable
abstract class InternetState {}
class InternetLoading extends InternetState {}
class InternetConnected extends InternetState {
final ConnectionType connectionType;
InternetConnected({@required this.connectionType});
}
class InternetDisconnected extends InternetState {}
4。 internet_cubit.dart:
Cubit 依赖于连接插件,所以我们导入它并创建一个流订阅,以便能够对连接变化做出反应。
我们还定义了两个方法 emitInternetConnected
和 emitInternetDisconnected
来改变实际的肘位状态。
确保正确处理流订阅。
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:meta/meta.dart';
part 'internet_state.dart';
class InternetCubit extends Cubit<InternetState> {
final Connectivity connectivity;
StreamSubscription connectivityStreamSubscription;
InternetCubit({@required this.connectivity})
: assert(connectivity != null),
super(InternetLoading()) {
connectivityStreamSubscription =
connectivity.onConnectivityChanged.listen((connectivityResult) {
if (connectivityResult == ConnectivityResult.wifi) {
emitInternetConnected(ConnectionType.wifi);
} else if (connectivityResult == ConnectivityResult.mobile) {
emitInternetConnected(ConnectionType.mobile);
} else if (connectivityResult == ConnectivityResult.none) {
emitInternetDisconnected();
}
});
}
void emitInternetConnected(ConnectionType _connectionType) =>
emit(InternetConnected(connectionType: _connectionType));
void emitInternetDisconnected() => emit(InternetDisconnected());
@override
Future<void> close() {
connectivityStreamSubscription.cancel();
return super.close();
}
}
5.在您的应用程序主文件中创建一个 Connectivity
插件实例并将其传递给您的 BlocProvider
。根据您的需要设置消费群:
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_4/cubit/internet_cubit.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() => runApp(MyApp(connectivity: Connectivity()));
class MyApp extends StatelessWidget {
final Connectivity connectivity;
const MyApp({Key key, this.connectivity}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => InternetCubit(connectivity: connectivity),
child: MaterialApp(
title: 'Connectivity cubit',
home: Scaffold(
appBar: AppBar(
title: Text('Connectivity cubit spotlight'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder<InternetCubit, InternetState>(
builder: (context, state) {
if (state is InternetConnected &&
state.connectionType == ConnectionType.wifi) {
return Text(
'Wifi',
style: TextStyle(color: Colors.green, fontSize: 30),
);
} else if (state is InternetConnected &&
state.connectionType == ConnectionType.mobile) {
return Text(
'Mobile',
style: TextStyle(color: Colors.yellow, fontSize: 30),
);
} else if (state is InternetDisconnected) {
return Text(
'Disconnected',
style: TextStyle(color: Colors.red, fontSize: 30),
);
}
return CircularProgressIndicator();
},
),
],
),
),
),
),
);
}
}