Flutter mobx state problem

app.dart

final List<InheritedProvider> providers = [
  Provider<Api>(create: (_) => Api()),
  Provider<X>(create: (_) => X()),
  Provider<Y>(create: (_) => Y()),
  ProxyProvider3<Api, X, Y, AppData>(
    update: (_, api, x, y, __) => AppData(api, x, y),
  ),
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: providers,
      child: MaterialApp(
        title: 'App',
        routes: {
          'LOADING': (_) => LoadingPage(),
          'INDEX': (_) => IndexPage(),
        },
        initialRoute: 'LOADING',
      ),
    );
  }
}

class LoadingPage extends StatelessWidget {
  Future<void> _load(BuildContext context, AppData appData) async {
    await appData.loadInitialData(); # initialize foo
  }
  
  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);

    return Material(
      child: FutureBuilder(
        future: _load(context, appData),
        builder: (BuildContext _, AsyncSnapshot future) {
          if (future.connectionState != ConnectionState.done) {
            return Text("loading");
          }

          if (future.error != null) {
            return Text(future.error.toString())
          }

          WidgetsBinding.instance.addPostFrameCallback((duration) =>
              Navigator.of(context)
                  .pushReplacement(route(builder: (_) => IndexPage())));

          return Container();
        },
      ),
    );
  }
}

class IndexPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appData = Provider.of<AppData>(context);
    print(appData.foo); #foo is initialized from the loading screen
    return Container();
  }
}