Connective

Introduzione

Nylo Website fornisce widget e utilita' sensibili alla connettivita' per aiutarti a costruire app che rispondono ai cambiamenti di rete. Il widget Connective si ricostruisce automaticamente quando la connettivita' cambia, mentre l'helper NyConnectivity fornisce metodi statici per controllare lo stato della connessione.

Widget Connective

Il widget Connective ascolta i cambiamenti di connettivita' e si ricostruisce in base allo stato di rete corrente.

Builder Basati sullo Stato

Fornisci widget diversi per ogni tipo di connessione:

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
)

Stati Disponibili

Builder Personalizzato

Usa Connective.builder per il controllo completo dell'interfaccia:

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}');
  },
)

Il builder riceve:

• context - BuildContext
• state - Enum NyConnectivityState (wifi, mobile, ethernet, vpn, bluetooth, other, none)
• results - List<ConnectivityResult> per verificare connessioni multiple

Ascolto dei Cambiamenti

Usa onConnectivityChanged per reagire quando la connettivita' cambia:

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

Widget OfflineBanner

Mostra un banner nella parte superiore dello schermo quando sei offline:

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

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

Personalizzazione del 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

La classe NyConnectivity fornisce metodi statici per verificare la connettivita':

Verificare se 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();
}

Verificare Tipi di Connessione Specifici

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();

Ottenere lo Stato Corrente

// 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.

Ascoltare i Cambiamenti

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();
}

Esecuzione Condizionale

// 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(),
);

Estensioni Widget

Aggiungi rapidamente la consapevolezza della connettivita' a qualsiasi widget:

Mostrare Alternativa Offline

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

Mostrare Solo Quando Online

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

Mostrare Solo Quando Offline

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

Parametri

Connective

OfflineBanner

Enum NyConnectivityState