Using Flutter with the updated amplify_flutter plugin

flutter and amplify

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 ๐ŸŽ‰

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.