Connective

Pengantar

Nylo Website menyediakan widget dan utilitas yang sadar konektivitas untuk membantu Anda membangun aplikasi yang merespons perubahan jaringan. Widget Connective secara otomatis membangun ulang saat konektivitas berubah, sementara helper NyConnectivity menyediakan method statis untuk memeriksa status koneksi.

Widget Connective

Widget Connective mendengarkan perubahan konektivitas dan membangun ulang berdasarkan status jaringan saat ini.

Builder Berbasis State

Berikan widget berbeda untuk setiap jenis koneksi:

Connective(
  onWifi: Text('Connected via WiFi'),
  onMobile: Text('Connected via Mobile Data'),
  onNone: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.wifi_off, size: 64),
      Text('No internet connection'),
    ],
  ),
  child: Text('Connected'), // Default for unspecified states
)

State yang Tersedia

Builder Kustom

Gunakan Connective.builder untuk kontrol penuh atas UI:

Connective.builder(
  builder: (context, state, results) {
    if (state == NyConnectivityState.none) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.cloud_off, size: 64, color: Colors.grey),
            SizedBox(height: 16),
            Text('You are offline'),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Go Back'),
            ),
          ],
        ),
      );
    }

    // Show connection type
    return Text('Connected via: ${state.name}');
  },
)

Builder menerima:

• context - BuildContext
• state - Enum NyConnectivityState (wifi, mobile, ethernet, vpn, bluetooth, other, none)
• results - List<ConnectivityResult> untuk memeriksa beberapa koneksi

Mendengarkan Perubahan

Gunakan onConnectivityChanged untuk bereaksi saat konektivitas berubah:

Connective(
  onConnectivityChanged: (state, results) {
    if (state == NyConnectivityState.none) {
      showSnackbar('You went offline');
    } else {
      showSnackbar('Back online!');
    }
  },
  child: MyContent(),
)

Widget OfflineBanner

Tampilkan banner di bagian atas layar saat offline:

Scaffold(
  body: Stack(
    children: [
      // Your main content
      MyPageContent(),

      // Offline banner (auto-hides when online)
      OfflineBanner(),
    ],
  ),
)

Menyesuaikan Banner

OfflineBanner(
  message: 'Check your connection',
  backgroundColor: Colors.orange,
  textColor: Colors.white,
  icon: Icons.signal_wifi_off,
  height: 50,
  animate: true, // Slide in/out animation
  animationDuration: Duration(milliseconds: 200),
)

Helper NyConnectivity

Kelas NyConnectivity menyediakan method statis untuk memeriksa konektivitas:

Memeriksa Online/Offline

if (await NyConnectivity.isOnline()) {
  // Make API request
  final data = await api.fetchData();
} else {
  // Load from cache
  final data = await cache.getData();
}

// Or check if offline
if (await NyConnectivity.isOffline()) {
  showOfflineMessage();
}

Memeriksa Jenis Koneksi Tertentu

if (await NyConnectivity.isWifi()) {
  // Download large files on WiFi
  await downloadLargeFile();
}

if (await NyConnectivity.isMobile()) {
  // Warn about data usage
  showDataWarning();
}

// Other methods:
await NyConnectivity.isEthernet();
await NyConnectivity.isVpn();
await NyConnectivity.isBluetooth();

Mendapatkan Status Saat Ini

// Get all active connection types
List<ConnectivityResult> results = await NyConnectivity.status();

if (results.contains(ConnectivityResult.wifi)) {
  print('WiFi is active');
}

// Get human-readable string
String type = await NyConnectivity.connectionTypeString();
print('Connected via: $type'); // "WiFi", "Mobile", "None", etc.

Mendengarkan Perubahan

StreamSubscription subscription = NyConnectivity.stream().listen((results) {
  if (results.contains(ConnectivityResult.none)) {
    showOfflineUI();
  } else {
    showOnlineUI();
  }
});

// Don't forget to cancel when done
@override
void dispose() {
  subscription.cancel();
  super.dispose();
}

Eksekusi Bersyarat

// Execute only when online (returns null if offline)
final data = await NyConnectivity.whenOnline(() async {
  return await api.fetchData();
});

if (data == null) {
  showOfflineMessage();
}

// Execute different callbacks based on status
final result = await NyConnectivity.when(
  online: () async => await api.fetchData(),
  offline: () async => await cache.getData(),
);

Extension Widget

Tambahkan kesadaran konektivitas ke widget apa pun dengan cepat:

Tampilkan Alternatif Offline

// Show a different widget when offline
MyContent().connectiveOr(
  offline: Text('Content unavailable offline'),
)

Hanya Tampilkan Saat Online

// Hide completely when offline
SyncButton().onlyOnline()

Hanya Tampilkan Saat Offline

// Show only when offline
OfflineMessage().onlyOffline()

Parameter

Connective

OfflineBanner

Enum NyConnectivityState