Checking internet connection and permission on Splash Screen in Flutter

Hello to everyone. Many of us have noticed that some mobile applications act according to whether there is an internet connection when starting. These features enable the operation of the application to progress more smoothly and provide better use to the users.

Terminals are Colorful and Beautiful with Powerlevel10k

In this article, I will give you an example of how to check the internet connection and how to check the permissions on Splash Screen.

First of all, we need to download the packages that will be useful for us while doing these checks. First, we download internet_connection_checker, then the permission_handler from pub.dev to pubspec.yaml.

 dependencies:
  flutter:
    sdk: flutter
  #state management
  provider: ^6.0.4
  #ethernet connection check
  internet_connection_checker: ^1.0.0+1
  permission_handler: ^10.2.0

In addition, we add the state management method provider, which we will use while doing this, to our project in the same way. This link will take you to more detailed information about this state management method. https://pub.dev/packages/provider.

Firstly, we need a variable that we will change when the internet is present or not. Thanks to this variable, we can do our operations. We define this variable below.

class Splash extends ChangeNotifier {
  bool checkEthernet = false;
}

After this step, we define the functions that we will use in the ISplashService abstract class. We will populate these functions in the SplashViewModel which was created for SplashScreenView.

abstract class ISplashService {
  //check ınternet connection
  Future<void> checkEthernetConnection(BuildContext context);
  //Change checkInternet Parametre
  void changeCheckInternet(BuildContext context);
  //Make checkInternet Default
  void makeCheckInternetDefault(BuildContext context);
  //go to NEXT PAGE
  Future<void> skipNextPage(BuildContext context);
  //get Started, take all func to one func
  Future<void> getStart(BuildContext context);
}

In our first function, we check if our application is connected to the internet. We implement this thanks to the internet_connection_checker package. If the device is connected to the internet, the changeCheckInternet method works. If it is not connected to the internet, the makeCheckInternetDefault method works, as you can see below.

@override
  Future<void> checkEthernetConnection(BuildContext context) async {
      //thanks to internet_connection_checker
    bool result = await InternetConnectionChecker().hasConnection;
    if (result == true) {
      // ignore: use_build_context_synchronously
      changeCheckInternet(context);
      // ignore: avoid_print
      print("Internet Connection available!");
    } else {
      // ignore: use_build_context_synchronously
      makeCheckInternetDefault(context);
      // ignore: avoid_print
      print("Internet Connection is not available!");
    }
  }

Well, let’s review changeCheckInternet method. What does that method implement? It serves to change the checkEthernet variable that we created the first time.

  @override
  void changeCheckInternet(BuildContext context) {
    Provider.of<Splash>(context, listen: false).checkEthernet =
        !Provider.of<Splash>(context, listen: false).checkEthernet;
  }

If there is no internet, makeCheckInternetDefault method works.

@override
  void makeCheckInternetDefault(BuildContext context) {
    Provider.of<Splash>(context, listen: false).checkEthernet = false;
  }

skipNextPage method, if the checkEthernet variable is true as a result of these operations, it allows the application to go to the next page from the SplashScreen.

  @override
  Future<void> skipNextPage(BuildContext context) async {
    if (Provider.of<Splash>(context, listen: false).checkEthernet == true) {
      Future.delayed(const Duration(seconds: 7), () {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => const RecipeView(),
          ),
        );
      });
    } else {}
  }

  @override
  Future<void> getStart(BuildContext context) async {
    checkEthernetConnection(context);
    skipNextPage(context);
  }

getStart(); it exists to keep these two methods together; checkEthernetConnection(); and skipNextPage();. This is getStart(); method should be run in initState();.

Terminal Productivity Booster Zsh Plugins

Finally, when this method runs in initState we can design according to this checkEthernet variable, or we can respond to the user according to this variable.

class SplashScreenView extends SplashScreenViewModel {
  const SplashScreenView({super.key});

  @override
  Widget build(BuildContext context) {
    return StatefulWrapper(
      onInit: () {
        getStart(context);
      },
      child: Scaffold(
        backgroundColor: RecipeColor.lightPink,
        body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [  
              Lottie.network(lottieUrlThinking),
              Text(
                "RECIPE",
                style: Theme.of(context).textTheme.displayLarge?.merge(
                      recipeTitleTextStyle(),
                    ),
              ),
              SizedBox(
                height: 250,
                child: Provider.of<Splash>(context, listen: false).checkEthernet
                    ? Lottie.network(lottieUrlLoading)
                    : const Text("No Ethernet!"),
              ),
            ],
          ),
        ),
      ),
    );
  }

  TextStyle recipeTitleTextStyle() {
    return TextStyle(
      fontSize: 60,
      fontWeight: FontWeight.w300,
      color: RecipeColor.darkPink,
    );
  }
}

On the SplashScreenView page you have seen above, if the checkEthernet variable is true, the loading animation plays, if the checkEthernet variable is false, “No Ethernet!” gives his text. Similar controls can be made in the project. Using this, different UIs can be designed or when the application realizes that there is no internet, it may not allow some operations.

Thank you for reading my Medium post. I hope I was able to explain the subject. If you like my article and want to be informed about my articles that I will share later, you can follow me. You can reach us via e-mail or on LinkedIn.