How to handle connection lost in a Flutter + Redux appp

Question

I've a flupper + redux app and I want to detect whene the connectivity is gone and display a waiting screen. I've subscribed MyApp to a property in my state called state.haveInternet with the idea of rebuild the whole app when the state.haveInternet changes. The problem is that my app doesnt display the NoInternetScreen when the state changes. What I'm doing wrong?

I think that another aproach could be play with the Navigator but I'm not sure where to use it. Inside the midleware (it smells)? Actually, I add a listener in connectivityMidleware. Should I move that midleware to the main() before runApp() ?

void main() {
  Store<AppState> store = Store(
    Reducers.root,
    initialState: AppState.initial(),
    middleware: [
      LoggingMiddleware.printer(),
      firebaseAuthMiddleware,
      firebaseDatabaseMiddleware,
      firebaseMessagingMiddleware,
      connectivityMiddleware,
    ],
  );

  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(new MyApp(store));
  });
}

class MyApp extends StatelessWidget {
  Store<AppState> store;

  MyApp(this.store);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    FirebaseAnalytics analytics = FirebaseAnalytics();

    return new StoreProvider(
      store: store,
      child: StoreConnector<AppState, Map>(
        converter: (store) {
          Map _viewmodel = {};
          Map<String, double> media =
              calculaMedia(List.of(store.state.registros.values), 10);

          _viewmodel['mainColor'] = getColorByTension(
              media['alta'].round(), media['baja'].round());

          if (media['alta'] == 0.0 || media['baja'] == 0) {
            _viewmodel['mainColor'] = Colors.red;
          }
          _viewmodel['haveInternet'] = store.state.haveConnectivity;

          return _viewmodel;
        },
        builder: (context, viewmodel) => MaterialApp(
              onGenerateTitle: (context) => AppLocalizations.of(context).title,
              theme: new ThemeData(
                primarySwatch: viewmodel['mainColor'],
              ),
              home: viewmodel['haveInternet'] ? SplashScreen(store): NoInternetScreen(),
              localizationsDelegates: [
                const AppLocalizationsDelegate(),
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
              ],
              supportedLocales: [
                const Locale('en', 'US'), // English
                const Locale('es', 'ES'), // Spanish
                // ... other locales the app supports
              ],
              navigatorObservers: [
                FirebaseAnalyticsObserver(analytics: analytics),
              ],
            ),
      ),
    );
  }
}

score 1 · Answer 1 · answered Nov 14 '18 at 13:11

You can use this simple method to know whether the user is connected to the internet or not.

//Use dart.io for lookup method.
import 'dart:io';
Future<bool> _checkConnectivity() async {
bool connect;
try {
final result = await InternetAddress.lookup('google.com');
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
connect = true;
}
} on SocketException catch (_) {
connect = false;
}
return connect;
}

now you can easily use this method, wherever you want it returns a Future.

How to handle connection lost in a Flutter + Redux appp

1 Answers1