Alan Flutter Framework

Available on: Android iOS



The Alan Flutter plugin helps you to integrate your voice experience and Alan Studio script into your Flutter app.

Note

The alan_voice package version 3.0.0 supports null safety. If your app does not use null safety yet, upgrade the Dart version to 2.12 or higher or use a previous version of the alan_voice package.

Integrating with Alan

To integrate a Flutter app with Alan:

  1. In the pubspec.yaml file of your Flutter project, add the Alan voice dependency:

    pubspec.yaml
    dependencies:
      flutter:
        sdk: flutter
      alan_voice: 2.4.0
    
  2. Open the main.dart file and at the top of it, add the alan_voice package dependency:

    main.dart
    import 'package:alan_voice/alan_voice.dart';
    
  3. In the _MyHomePageState class, add the method for initializing the Alan button:

    main.dart
    class _MyHomePageState extends State<MyHomePage> {
      _MyHomePageState() {
        /// Initializing Alan with sample project id
        AlanVoice.addButton(
          "",
          buttonAlign: AlanVoice.BUTTON_ALIGN_LEFT);
     }
    
  4. In Alan Studio, go to Integrations, copy the value from the Alan SDK Key field and insert this value in the quotes.

    main.dart
    class _MyHomePageState extends State<MyHomePage> {
      _MyHomePageState() {
        /// Initializing Alan with sample project id
        AlanVoice.addButton(
          "314203787ccd9370974f1bf6b6929c1b2e956eca572e1d8b807a3e2338fdd0dc/prod",
          buttonAlign: AlanVoice.BUTTON_ALIGN_LEFT);
      }
    

That’s it. Now you can run the app, tap the Alan button and start interacting with Alan.

Specifying the Alan button parameters

You can specify the following parameters for the Alan button added to your app:

Name

Type

Description

projectId

string

The Alan SDK key for a project in Alan Studio.

authJson

JSON object

The authentication or configuration data to be sent to the voice script. For details, see authData.

buttonAlign

Int

The Alan button position in the app. Use one of the two constants: BUTTON_ALIGN_LEFT or BUTTON_ALIGN_RIGHT.

Using client API methods

You can use the following client API methods in your app:

setVisualState()

Use the setVisualState() method to inform the voice assistant about the app’s visual context. For details, see setVisualState().

Client app
_MyHomePageState() {
  void _setVisualState() {
    /// Providing any params with json
    var visualState = jsonEncode({"data":"your data"});
    AlanVoice.setVisualState(visualState);
  }
}

callProjectApi()

Use the callProjectApi() method to send data from the client app to the voice script and trigger activities without voice commands. For details, see callProjectApi().

Voice script
projectAPI.setClientData = function(p, param, callback) {
  console.log(param);
};
Client app
_MyHomePageState() {
  void _callProjectApi() {
    /// Providing any params with json
    var params = jsonEncode({"data":"your data"});
    AlanVoice.callProjectApi("script::setClientData", params);
  }
}

playText()

Use the playText() method to play specific text in the client app. For details, see playText().

Client app
_MyHomePageState() {
  /// Playing any text message
  void _playText() {
    /// Providing text as string param
    AlanVoice.playText("Hi");
  }
}

playCommand()

Use the playCommand() method to execute a specific command in the client app. For details, see playCommand().

Client app
_MyHomePageState() {
  /// Executing a command locally
  void _playCommand() {
    /// Providing any params with json
    var command = jsonEncode({"action":"openSomePage"});
    AlanVoice.playCommand(command);
  }
}

activate()

Use the activate() method to activate the Alan button programmatically. For details, see activate().

Client app
_MyHomePageState() {
  /// Activating the Alan button programmatically
  void _activate() {
    AlanVoice.activate();
  }
}

deactivate()

Use the deactivate() method to deactivate the Alan button programmatically. For details, see deactivate().

Client app
_MyHomePageState() {
  /// Deactivating the Alan button programmatically
  void _deactivate() {
    AlanVoice.deactivate();
  }
}

isActive()

Use the isActive() method to check the Alan button state: active or not. For details, see isActive().

Client app
void _checkIsActive() async {
  var isActive = await AlanVoice.isActive();
  if (isActive) {
    _showDialog("Active");
  } else {
    _showDialog("NOT active");
  }
}

getWakewordEnabled()

Use the getWakewordEnabled() method to check the state of the wake word for the Alan button. For details, see getWakewordEnabled().

Client app
var enabled = await AlanVoice.getWakewordEnabled();

setWakewordEnabled()

Use the setWakewordEnabled() method to enable or disable the wake word for the Alan button. For details, see setWakewordEnabled().

Client app
AlanVoice.setWakewordEnabled(enabled);

Using handlers

You can use the following Alan handlers in your app:

onCommand handler

Use the onCommand handler to handle commands sent from the voice script. For details, see onCommand handler.

Client app
_MyHomePageState() {
  /// Handle commands from Alan Studio
  AlanVoice.onCommand.add((command) {
    debugPrint("got new command ${command.toString()}");
  });
}

onButtonState handler

Use the onButtonState handler to capture and handle the Alan button state changes. For details, see onButtonState handler.

Client app
_MyHomePageState() {
  /// Handle button state
  AlanVoice.onButtonState.add((state) {
    debugPrint("got new button state ${state.name}");
  });
}

onEvent handler

Use the onEvent handler to capture and handle events emitted by Alan: get user’s utterances, voice assistant responses and so on. For details, see onEvent handler.

Client app
_MyHomePageState() {
  /// Handle events
  AlanVoice.onEvent.add((event) {
    debugPrint("got new event ${event.data.toString()}");
  });
}

Switching between logging levels

By default, Alan does not log its system events such as change of the Alan button state to the IDE console. If you want to see messages from Alan, switch to the all logging level:

main.dart
AlanVoice.setLogLevel("all");

To disable logs, either remove the line above or switch to the none logging level:

main.dart
AlanVoice.setLogLevel("none");

Troubleshooting

To troubleshoot problems you may have with your Flutter app, check the solutions below:

  • The minimum possible Android SDK version required by the Alan SDK is 21. If the version in your project is lower, you may encounter the following error: AndroidManifest.xml Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:alan_voice]. Open the ./android/app/build.gradle file, under defaultConfig, locate minSdkVersion and change the version to 21.

  • Starting from version 3.0.0, the alan_voice package supports null safety. If you encounter the following error: Cannot run with sound null safety because dependencies don't support null safety, upgrade to the latest package version.

  • (If running the app on an emulator) All virtual microphone options must be enabled. On the emulator settings bar, click More (…) > Microphone and make sure all toggles are set to the On position.

What’s next?

../../../_images/git-purple.svg

Example apps

Find and explore examples of voice-enabled apps on the Alan AI GitHub repository.

View on GitHub