Using Flutter with the updated amplify_flutter plugin

There are a lot of tutorials out there explaining how to use amplify with flutter, however, even the most recent ones use amplify_core which no longer works as instructed and has been replaced by amplify_flutter.

This includes even the AWS official tutorial found here: https://aws.amazon.com/getting-started/hands-on/build-flutter-app-amplify/

After much frustration and googling things such as:

• flutter amplify app Amplify isn’t a type
• Amplify isn’t a type
• flutter final amplify = Amplify();
• final amplify = Amplify();
• error: The expression doesn’t evaluate to a function so it can’t be invoked
• amplify_core
• flutter amplify core not installing
• flutter amplify_core not installing
• Error: Method not found ‘Amplify’

I finally pieced together the solution.

If you just want to copy and paste a working example you can find my solution here https://github.com/donbale/amplify_flutter_authflow just make sure to add amplify_flutter: ‘<1.0.0‘ in your pubspec.yaml instead of amplify_core: ‘<1.0.0’

If you want a more detailed walkthrough keep reading:

Replacing amplify_core with amplify_flutter

I am presuming if you have got this far you have already done your amplify setup so I wont got through that.

The first thing you need to do is delete amplify_ core from your pubspec.yaml and add this:

#dependencies:
    amplify_flutter: '<1.0.0'

Then instead of importing amplify_core into your dart file import amplify_flutter like this:

import 'package:amplify_flutter/amplify.dart';

Using amplify_flutter in your code

Tutorials using the old plugin use final _amplify = Amplify(); in the code which no longer works so remove this.

Add a boolean to save if Amplify is configured or not:

...class _EntryScreenState extends State {
  bool _amplifyConfigured = false;

Now create a function to configure Amplify:

... // build closing }

void _configureAmplify() async {
  await Amplify.configure(amplifyconfig);
  print('Successfully configured Amplify ????');
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print('Could not configure Amplify ☠️');
    }
  }

... // _MyAppState closing }

Now call _configureAmplify() in initState() of _MyAppState:

... // super.initState();

_configureAmplify();

... // _authService.showLogin();

Now run the app and you should see the following printed to your logs:

Successfully configured Amplify ????