Connective

Introduction

Nylo Website fournit des widgets et des utilitaires sensibles a la connectivite pour vous aider a construire des applications qui reagissent aux changements de reseau. Le widget Connective se reconstruit automatiquement lorsque la connectivite change, tandis que le helper NyConnectivity fournit des methodes statiques pour verifier l'etat de la connexion.

Widget Connective

Le widget Connective ecoute les changements de connectivite et se reconstruit en fonction de l'etat actuel du reseau.

Constructeurs bases sur l'etat

Fournissez differents widgets pour chaque type de connexion :

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
)

Etats disponibles

Constructeur personnalise

Utilisez Connective.builder pour un controle total sur l'interface :

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

Le constructeur recoit :

• context - BuildContext
• state - enum NyConnectivityState (wifi, mobile, ethernet, vpn, bluetooth, other, none)
• results - List<ConnectivityResult> pour verifier plusieurs connexions

Ecouter les changements

Utilisez onConnectivityChanged pour reagir lorsque la connectivite change :

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

Widget OfflineBanner

Affichez une banniere en haut de l'ecran lorsque hors ligne :

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

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

Personnaliser la banniere

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 fournit des methodes statiques pour verifier la connectivite :

Verifier si en ligne/hors ligne

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

Verifier des types de connexion specifiques

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

Obtenir l'etat actuel

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

Ecouter les changements

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

Execution conditionnelle

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

Extensions de widgets

Ajoutez rapidement la sensibilite a la connectivite a n'importe quel widget :

Afficher une alternative hors ligne

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

Afficher uniquement en ligne

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

Afficher uniquement hors ligne

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

Parametres

Connective

OfflineBanner

Enum NyConnectivityState