Amplify-Flutter for Web not working Error "Amplify has already been configured and adding plugins after configure is not supported."

Question

The same code is working for android/ios but showing the below error after trying to run for web.

"message": "Amplify has already been configured and adding plugins after configure is not supported."

This is error is only showing when debugging for web. The exact same code is working fine for mobile devices. Can anyone tell me how to solve this?

/flutter ( 3318): An error occurred configuring Amplify: AmplifyAlreadyConfiguredException {
I/flutter ( 3318):   "message": "Amplify has already been configured and adding plugins after configure is not supported.",
I/flutter ( 3318):   "recoverySuggestion": "Check if Amplify is already configured using Amplify.isConfigured."
I/flutter ( 3318): }
W/Parcel  ( 3318): Expecting binder but got null!

Main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:moduleone/constants/colors.dart';
import 'package:moduleone/features/home/homePage.dart';
import 'package:moduleone/router.dart';

import 'amplifyconfiguration.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  bool isAmplifySuccessfullyConfigured = false;
  try {
    await _configureAmplify();
    isAmplifySuccessfullyConfigured = true;
  } on AmplifyAlreadyConfiguredException {
    debugPrint('Amplify configuration failed.');
  }
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

Future<void> _configureAmplify() async {
  try {
    final auth = AmplifyAuthCognito();
    await Amplify.addPlugin(auth);

    // call Amplify.configure to use the initialized categories in your app
    await Amplify.configure(amplifyconfig);
  } on Exception catch (e) {
    safePrint('An error occurred configuring Amplify: $e');
  }
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      initialStep: AuthenticatorStep.signIn,
      signUpForm: SignUpForm.custom(
        fields: [
          SignUpFormField.name(required: true),
          SignUpFormField.email(required: true),
          SignUpFormField.phoneNumber(
            required: true,
          ),
          SignUpFormField.custom(
            required: true,
            validator: ((value) {
              if (value == null || value.isEmpty) {
                return 'You must provide a Specialization';
              }
              return null;
            }),
            title: 'Specialization',
            attributeKey:
                const CognitoUserAttributeKey.custom('specialization'),
          ),
          SignUpFormField.password(),
          SignUpFormField.passwordConfirmation(),
        ],
      ),
      child: MaterialApp(
        theme: ThemeData(
          // colorScheme: ColorScheme.fromSwatch(
          //   primarySwatch: AppColors.primaryColor,
          // ).copyWith(background: const Color(0xff82CFEA)),
          scaffoldBackgroundColor: AppColors.primary,
          useMaterial3: true,
          primaryColor: Colors.black,
          fontFamily: 'Satoshi',
        ),
        debugShowCheckedModeBanner: false,
        onGenerateRoute: (settings) => generateRoute(settings),
        builder: Authenticator.builder(),
        home: const HomePage(),
      ),
    );
  }
}

Mobile: Mobile Screenshot

Web:

Web Screenshot

Answer 1

To fix mentioned issue try below solution.

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

    Amplify.isConfigured ? null : _configureAmplify();
  }