I am trying to build an app that uses webview but before loading it I need an splashscreen that checks if there is internet connection and if there isn't it shows an Snackbar in splashscreen. Do you know how to achieve this?
CodePudding user response：
You can use internet_connection_checker for internet check
bool result = await InternetConnectionChecker().hasConnection;
if(result == true) {
print('YAY! Free cute dog pics!');
} else {
print('No internet :( Reason:');
}
call this code in init method in SplashScreen
CodePudding user response：
Use this plugin https://pub.dev/packages/connectivity_plus
Future<bool> checkInternet() async {
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
return true;
} else if (connectivityResult == ConnectivityResult.wifi) {
return true;
}
return false;
}
Use it like this
if (!(await checkInternet())) {
///show your snackBar here
}
CodePudding user response：
This would help. I achieved this in my personal project.
As you can see am using internet_connection_checker and whenever the internet is down I do a retry which was achieved by calling a restart widget in the main method to safely perform a restart whenever the internet is restored
- Splash Page
import 'dart:async';
import 'package:airduka/main.dart';
import 'package:airduka/models/user_model.dart';
import 'package:airduka/widgets/color.dart';
import 'package:airduka/widgets/custom_navigations.dart';
import 'package:airduka/widgets/small_text.dart';
import 'package:flutter/material.dart';
import 'package:internet_connection_checker/internet_connection_checker.dart';
import 'package:page_transition/page_transition.dart';
class SplashPage extends StatefulWidget {
final String title, description, time;
final UserModel? user;
final List<dynamic>? listMsg;
const SplashPage({Key? key, this.listMsg, required this.title, required this.description, required this.time, this.user}) : super(key: key);
@override
_SplashPageState createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
Timer? timer;
Future<InternetConnectionStatus> dataConnection() async{
InternetConnectionStatus statusMain = InternetConnectionStatus.disconnected;
final StreamSubscription<InternetConnectionStatus> listener =
InternetConnectionChecker().onStatusChange.listen(
(InternetConnectionStatus status) {
switch (status) {
case InternetConnectionStatus.connected:
statusMain = InternetConnectionStatus.connected;
break;
case InternetConnectionStatus.disconnected:
statusMain = InternetConnectionStatus.disconnected;
break;
}
},
);
// close listener after 30 seconds, so the program doesn't run forever
await Future<void>.delayed(const Duration(seconds: 1));
await listener.cancel();
return statusMain;
}
@override
void initState() {
timer = Timer(
const Duration(seconds: 5),() => Navigator.pushReplacement(
context,
PageTransition(
child: FutureBuilder<InternetConnectionStatus>(
future: dataConnection(),
builder: (context, AsyncSnapshot snapshot) {
switch(snapshot.connectionState){
case ConnectionState.none:
case ConnectionState.waiting:
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: const Color(0xFF00639E),
body: Center(
child: Image.asset(
"assets/animations/jety.gif",
height: 200,
),
),
);
default:
if(snapshot.hasError)
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: const Color(0xFF00639E),
body: Center(
child: Image.asset(
"assets/animations/jety.gif",
height: 200,
),
),
);
else if(snapshot.data == InternetConnectionStatus.disconnected)
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: const Color(0xFF00639E),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Image.asset(
"assets/animations/jety.gif",
height: 200,
),
),
const SmallTextWidget(text: "You seem to be offline", color: AppColors.whiteThemeColor,),
const SizedBox(height: 8.0,),
InkWell(
onTap: (){
RestartWidget.restartApp(context);
},
child: Container(
height: 45,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: AppColors.whiteThemeColor
),
child: const Center(child: Text("Retry", style: TextStyle(color: AppColors.blackThemeColor, fontSize: 14.0, fontWeight: FontWeight.bold),)),
),
),
],
),
);
else Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: const Color(0xFF00639E),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Image.asset(
"assets/animations/jety.gif",
height: 200,
),
),
const SmallTextWidget(text: "Something wrong happened!", color: AppColors.whiteThemeColor,),
const SizedBox(height: 8.0,),
InkWell(
onTap: (){
RestartWidget.restartApp(context); //call restart here
},
child: Container(
height: 45,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: AppColors.whiteThemeColor
),
child: const Center(child: Text("Retry", style: TextStyle(color: AppColors.blackThemeColor, fontSize: 14.0, fontWeight: FontWeight.bold),)),
),
),
],
),
);
return CustomNavigation(msgList: widget.listMsg, user: widget.user,);
}
}),
type: PageTransitionType.fade))
);
super.initState();
}
@override
void dispose() {
timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: const Color(0xFF00639E),
body: Center(
child: Image.asset(
"assets/animations/jety.gif",
height: 200,
),
),
);
}
}
- Restart Widget in the main method
class RestartWidget extends StatefulWidget {
const RestartWidget({required this.child});
final Widget child;
static void restartApp(BuildContext context) {
context.findAncestorStateOfType<_RestartWidgetState>()!.restartApp();
}
@override
_RestartWidgetState createState() => _RestartWidgetState();
}
class _RestartWidgetState extends State<RestartWidget> {
Key key = UniqueKey();
void restartApp() {
setState(() {
key = UniqueKey();
});
}
@override
Widget build(BuildContext context) {
return KeyedSubtree(
key: key,
child: widget.child,
);
}
}