Flutter Amplify DataStore plugin has not been added to Amplify

Question

All of the sudden I am getting the error DataStore plugin has not been added to Amplify, recoverySuggestion: Add DataStore plugin to Amplify and call configure before calling DataStore related APIs to rule out any of the work I was doing on that page I tried it on a fresh page with the same result.

I already did execute amplify codegen models, amplify pull and amplify env pull. Also tried to do a flutter clean but I don't see any change at all. I'm really puzzled and can't seem to figure out the issue.

One thing I did notice while debugging was that the initState of the screen seems to be executed earlier as the configureAmplify callback.

I will show the relevant parts of the code (sorry for the long code in advance).

Pubspec.yaml

dependencies:
  ...
  amplify_flutter: ^0.2.10
  amplify_datastore: ^0.2.10
  amplify_api: ^0.2.10
  amplify_auth_cognito: ^0.2.10
  amplify_storage_s3: ^0.2.10

main.dart

import 'package:flutter/material.dart';
import 'package:my_package/screens/main/teams_screen.dart';
import 'package:my_package/services/amplify_services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    AmplifyService.configureAmplify();
  }

  @override
  Widget build(BuildContext context) {
  ...
  }
}

services/amplify_services.dart

import 'package:flutter/foundation.dart';
import 'package:amplify_flutter/amplify.dart';
import 'package:amplify_datastore/amplify_datastore.dart';
import 'package:amplify_api/amplify_api.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_storage_s3/amplify_storage_s3.dart';
import 'package:my_package/models/ModelProvider.dart';
import 'package:my_package/amplifyconfiguration.dart';

class AmplifyService {
  static configureAmplify() async {
    AmplifyAPI apiPlugin = AmplifyAPI();
    AmplifyAuthCognito authPlugin = AmplifyAuthCognito();
    AmplifyStorageS3 amplifyStorageS3 = AmplifyStorageS3();
    AmplifyDataStore dataStorePlugin = AmplifyDataStore(
      modelProvider: ModelProvider.instance,
    );

    await Amplify.addPlugins([
      dataStorePlugin,
      authPlugin,
      amplifyStorageS3,
      apiPlugin,
    ]);

    try {
      await Amplify.configure(amplifyconfig);
    } on AmplifyAlreadyConfiguredException {
      if (kDebugMode) {
        print(
            "Amplify was already configured. Looks like app restarted on android.");
      }
    }
  }
}

Lastly the very basic page with not even an output (screens/teams_screen.dart)

import 'dart:async';
import 'package:amplify_datastore/amplify_datastore.dart';
import 'package:amplify_flutter/amplify.dart';
import 'package:flutter/material.dart';
import 'package:my_package/models/Team.dart';

class TeamsScreen extends StatefulWidget {
  const TeamsScreen({Key? key}) : super(key: key);

  @override
  _TeamsScreenState createState() => _TeamsScreenState();
}

class _TeamsScreenState extends State<TeamsScreen> {
  late StreamSubscription<QuerySnapshot<Team>> _teamsSubscription;
  bool _isLoading = true;
  List<Team> teams = [];

  @override
  void initState() {
    super.initState();
    _initializeApp();
  }

  @override
  void dispose() {
    _teamsSubscription.cancel();
    super.dispose();
  }

  Future<void> _initializeApp() async {
    _teamsSubscription = Amplify.DataStore.observeQuery(Team.classType)
        .listen((QuerySnapshot<Team> snapshot) {
      setState(() {
        if (_isLoading) _isLoading = false;
        teams = snapshot.items;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Answer 1

New day, fresh mind. The issue turned out to be quite simple, I didn't set an _isLoading state to indicate weter or not the configureAmplify callback was completed and let the app just continue loading all the other screens triggering the error. So after setting the state and only adding the rest of the app after the state was changed it worked without any problem.

To fix it I did the following:

import 'package:flutter/material.dart';
import 'package:my_package/screens/main/teams_screen.dart';
import 'package:my_package/services/amplify_services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _initializeApp();
  }

  Future<void> _initializeApp() async {
    await AmplifyService.configureAmplify(); // note the await!

    setState(() {
      _isLoading = false; // important to set the state!
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _isLoading 
          ? Center(child: CircularProgressIndicator())
          : const MainScreen(), // _isLoading is very important here.
    );
  }
}