Flutter에서 인터넷 연결을 확인하는 방법은 무엇입니까?

오늘의 기사에서는 Flutter 앱에서 인터넷 연결을 확인하는 방법을 보여줍니다. 예를 들어 인터넷에서 오는 많은 리소스로 앱을 빌드하는 경우 인터넷이 사라지면 어떻게 될까요? 이 기사에서이 문제를 해결할 것이므로 흥분하기 전에 작업을 시작하십시오.

이 앱에는 GetX 아키텍트를 사용하고 있습니다. GetX에 대해 잘 모르신다면 아래 기사를 확인하세요.

문서: How To Create The Flutter App With Getx Architect

첫 번째 단계는 pubspec.yaml 파일에 이러한 종속성을 설치하는 것입니다.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  get: ^4.6.1
  flutter_svg: ^1.0.0
  data_connection_checker:
    git:
      url: https://github.com/chornthorn/data_connection_checker.git
      ref: master

다음은 Flutter 및 GetX 아키텍트로 만든 간단한 카운터 앱입니다. 다음 작업은 인터넷 연결 확인을 추가하는 것입니다. 그러기 위해서는 몇 가지 단계를 따라야 합니다.

1 단계

아래 이미지와 같이 앱 구조를 만듭니다.

2 단계

이제 홈 페이지와 경로를 만듭니다.

//home/home_controller.dart

import 'package:get/get.dart';
class HomeController extends GetxController {
  int counter = 0;
  void incrementCounter() {
    counter++;
    update(); //update method is nothing but setState
  }
}

//home/home_binding.dart

import 'package:get/get.dart';
import 'package:internet_connection_checker/home/home_page_controller.dart';

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

//home/home_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:internet_connection_checker/home/home_page_controller.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      builder: (controller) => Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${controller.counter}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: controller.incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

//routes/app_routes.dart

class AppRoutes {
  static const home = '/home';
}

//routes/app_pages.dart

import 'package:get/get.dart';
import 'package:internet_connection_checker/home/home_page.dart';
import 'package:internet_connection_checker/home/home_page_binding.dart';
import 'package:internet_connection_checker/routes/app_routes.dart';

class AppPages {
  static final List<GetPage> pages = [
    GetPage(
      name: AppRoutes.home,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
  ];
}

3단계

인터넷 연결이 끊어졌을 때 표시되는 위젯을 만듭니다.

//widget/network_error_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';

class NetworkErrorItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: Get.height, //Get.height = MediaQuery.of(context).size.height
        width: Get.width, //Get.width = MediaQuery.of(context).size.width
        color: Colors.white,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //Here I am using an svg icon
            SvgPicture.asset(
              'assets/icons/network.svg',
              width: 200,
              height: 200,
              color: Colors.red[200],
            ),
            const SizedBox(height: 30),
            const Text(
              'Internet connection lost!',
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            const Text(
              'Check your connection and try again.',
              style: TextStyle(fontSize: 16, color: Colors.grey),
            )
          ],
        ),
      ),
    );
  }
}

4단계

이제 장치가 인터넷에 연결되어 있는지 확인하는 네트워크 상태 서비스를 만듭니다. 인터넷이 연결될 때마다 홈페이지로 리디렉션되며, 그렇지 않으면 인터넷 연결이 끊어졌다고 표시됩니다.

//services/network_status_service.dart

import 'package:data_connection_checker/data_connection_checker.dart';
import 'package:get/get.dart';
import 'package:internet_connection_checker/routes/app_routes.dart';
import 'package:internet_connection_checker/widgets/network_error_item.dart';

class NetworkStatusService extends GetxService {
  NetworkStatusService() {
    DataConnectionChecker().onStatusChange.listen(
          (status) async {
        _getNetworkStatus(status);
      },
    );
  }

  void _getNetworkStatus(DataConnectionStatus status) {
    if (status == DataConnectionStatus.connected) {
      _validateSession(); //after internet connected it will redirect to home page
    } else {
      Get.dialog(NetworkErrorItem(), useSafeArea: false); // If internet loss then it will show the NetworkErrorItem widget
    }
  }

  void _validateSession() {
    Get.offNamedUntil(AppRoutes.home, (_) => false); //Here redirecting to home page
  }
}

5단계

네트워크 상태 서비스 클래스를 호출할 종속성 주입 클래스를 만듭니다.

//utils/dependency_injection.dart

import 'package:get/get.dart';
import 'package:internet_connection_checker/services/network_status_service.dart';

class DependencyInjection {
  static void init() async {
    //services
    Get.put<NetworkStatusService>(NetworkStatusService(), permanent: true);
  }
}

6단계

이제 void 메인 클래스에서 종속성 주입 클래스를 호출합니다.

//main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:internet_connection_checker/home/home_page.dart';
import 'package:internet_connection_checker/home/home_page_binding.dart';
import 'package:internet_connection_checker/routes/app_pages.dart';
import 'package:internet_connection_checker/utils/dependency_injection.dart';

void main() {
  runApp(const MyApp());
  DependencyInjection.init(); //Here we are calling the Dependency Injection
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Counter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      initialBinding: HomeBinding(),
      getPages: AppPages.pages,
    );
  }
}

모든 작업이 완료되었습니다. 이제 앱을 빌드하세요. 성공적으로 구축되면 인터넷에서 장치를 분리하십시오.




GitHubrepository에서 소스 코드를 다운로드할 수 있습니다.

결론

따라서 이 기사에서는 data_connection_checker 패키지를 사용하여 Flutter 앱에서 인터넷 연결을 확인하는 방법을 자세히 배웠습니다.

이 기사가 마음에 드셨으면 합니다.
이 기사의 후원자: UniqueApps