Documentation

Powered by Algolia

Building a voice assistant for a Flutter app

With the Alan Flutter voice framework, you can create a voice assistant or a chatbot for your Flutter app and run it on iOS or Android. In this tutorial, we will build a simple Flutter app with Alan voice and test drive it on a device. The app users will be able to tap the Alan button and give voice commands, and Alan will reply to them.

What you will learn

  • How to add a voice interface to a Flutter app
  • How to write simple voice commands for a Flutter app

What you will need

To go through this tutorial, make sure the following prerequisites are met:

  • You have signed up to the Alan Studio.
  • You have created a project in the Alan Studio.
  • You have set up the Flutter environment and it is functioning properly. For details, see Flutter documentation.
  • The device on which you are planning to test drive the Flutter app is connected to the Internet. The Internet connection is required to let the Flutter app communicate with the voice script run in the Alan Cloud.

Step 1: Create a Flutter app

For this tutorial, we will be using a simple Flutter app. Let's create it.

  1. Open the IDE and select to start a new Flutter project.
  2. Select Flutter Application as the project type. Then click Next.
  3. Enter a project name (for example, myapp). Then click Next.
  4. Click Finish.

Step 2: Integrate the app with Alan

Now we will add the Alan button to our app. Do the following:

  1. In the Flutter project, open the pubspec.yaml file. Under dependencies, add the Alan voice dependency: alan_voice: 2.0.7.

    ...
    dependencies:
      flutter:
        sdk: flutter
        ...
      alan_voice: 2.0.7
    ...
  2. In the lib folder, open the main.dart file. At the top of the file, add the following import statement:

    import 'package:alan_voice/alan_voice.dart';
  3. In the main.dart file, locate the _MyHomePageState class. To this class, add the _MyHomePageState() method for initializing the Alan button:

    class _MyHomePageState extends State<MyHomePage> {
    ...
    	_MyHomePageState() {
    		//Init Alan with sample project id
    		AlanVoice.addButton(
    			"",
    			buttonAlign: AlanVoice.BUTTON_ALIGN_LEFT);
    	}
    ...
    }
  4. We need to add the key for our Alan Studio project. In the Alan Studio, at the top of the code editor, click Integrations and copy the code provided in the Alan SDK Key field. Then paste the copied code between the quotes:

    class _MyHomePageState extends State<MyHomePage> {
    	...
    	_MyHomePageState() {
    	//Init Alan with sample project id
    		AlanVoice.addButton(
    			"b23c22fa051d81b47d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
    			buttonAlign: AlanVoice.BUTTON_ALIGN_LEFT);
    	}
    ...
    }
  5. Run the app.

When you run the app, you may encounter the following error: AndroidManifest.xml Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:alan_voice]. To work around it, open the ./android/app/build.gradle file, under defaultConfig, locate minSdkVersion and change the version to the version number reported in the error.

After the app is built, it will be launched on the connected device. In the bottom left corner, tap the Alan button and say: Hello world.

However, if you try to ask: How are you doing? Alan will not give an appropriate response. This is because the voice script in the Alan Studio does not contain the necessary voice commands so far.

Step 3: Add voice commands

Let's add some voice commands so that we can interact with Alan. In the Alan Studio, open the project and in the code editor, add the following intents:

intent (`What is your name?`, p => {
    p.play(`It's Alan, and yours?`);
});

intent (`How are you doing?`, p => {
    p.play(`Good, thank you. What about you?`);
});

Now in the app tap the Alan button and ask: What is your name? and How are you doing? Alan will give responses we have provided in the added intents.

What's next?

You can now proceed to building a voice interface with Alan. Here are some helpful resources:

  • Have a look at the next tutorial: Navigating between screens in a Flutter app.
  • Go to Server API to learn about Alan concepts and functionality you can use to create a voice script.
  • In Alan Git, get the Flutter example app. Use this app to see how integration for Flutter apps can be implemented.
  • In Alan Git, get the Flutter Shrine app. Use this app to explore how a voice interface for a shopping app can be organized. To get voice scripts for this example app, in the Alan Studio, click Create New Project and select Flutter Shrine Example.