Contents Menu Expand
Logo
Web (React, Angular, etc.) Objective-C Swift Kotlin Java Flutter Ionic React Native
Go to docs
Logo
Logo

Introduction

  • Get started
  • How Alan AI works
    • Alan AI basics
    • Alan AI infrastructure
    • Deployment options
    • Voice processing
  • Alan AI Studio
    • Alan AI projects
    • Dialog scripts
      • Managing scripts
      • Exporting and importing scripts
      • Sharing and keeping scripts in GitHub
      • Using shortcuts
      • Changing the theme and font size
      • Viewing the script flowchart
    • Versions and environments
    • Testing and debugging
      • Debugging Chat
      • Tools to simulate in-app behavior
      • Test View
      • Alan AI Studio logs
      • In-app testing
    • Alan AI Playground
    • Conversational analytics
      • Projects dashboard
      • Analytics View
    • Popup editor
    • Billing and subscriptions
  • Alan AI button
    • Customizing the AI assistant
    • Setting up cohorts
    • Starting and stopping dialog sessions
  • Supported platforms
  • Recent Alan AI Platform updates

Server API

  • Dialog script concepts
    • Requests and responses
      • Intent matching
      • Voice settings
    • Patterns
    • Slots
      • User-defined slots (static)
      • Dynamic slots
      • Regex slots
      • Predefined slots
    • Contexts
    • Q&A service
    • Predefined script objects
    • Built-in JavaScript libraries
    • Error handling and re-prompts
    • Alan AI button popups
    • Lifecycle callbacks
  • Sending data from the app
    • authData
    • Visual state
    • Project API
  • User data
    • User events
    • Client object
  • API reference

Integration

  • Integration overview
  • Web frameworks
    • React
    • Angular
    • Vue
    • Ember
    • JavaScript
    • Electron
    • Cross-platform solutions
    • Server-side rendering
  • iOS
  • Android
  • Cross-platform frameworks
    • Flutter
    • Ionic
      • Ionic React
      • Ionic Angular
      • Ionic Vue
      • iOS and Android deployment
      • Communication between components
      • Troubleshooting
    • React Native
    • Apache Cordova

Alan AI SDK toolkit

  • Client API methods
  • Alan AI handlers
    • onCommand handler
    • onButtonState handler
    • onConnectionStatus handler
    • onEvent handler

Samples & Tutorials

  • How-tos
  • Tutorials
    • Web
      • Building a voice assistant for web
      • Creating a voice-enabled food delivery app: complete tutorial
        • Step 1: Create a web app
        • Step 2: Create a voice assistant
        • Step 3: Integrate Alan AI with the app
        • Step 4: Add a voice command
        • Step 5: Specify options and alternatives
        • Step 6: Pick out important data with slots
        • Step 7: Add several items
        • Step 8: Send a command to display items in the cart
        • Step 9: Use slot labels to display the order
        • Step 10: Remove items with voice
        • Step 11: Highlight named items
        • Step 12: Add the checkout context
        • Step 13: Get the delivery time
        • Step 14: Capture a comment
        • Step 15: Populate fields with the delivery details
        • Step 16: Make an API call to get ingredients
        • Step 17: Get the app visual context
        • Step 18: Get the balance
        • Step 19: Let Alan start the dialog
        • Step 20: Show a popup next to the Alan button
      • Using dynamic slots in patterns
      • Making a Web API call from the dialog script
      • Building an AI-powered voice and text chat trained on custom data
    • Web frameworks
      • Building a voice assistant for a React app
      • Building a voice assistant for an Angular app
      • Building a voice assistant for a Vue app
      • Building a voice assistant for an Ember app
      • Building a voice assistant for an Electron app
    • iOS
      • Building a voice assistant for an iOS app
      • Navigating between views
      • Passing the app state to the dialog script
      • Highlighing items with voice
      • Triggering dialog script actions without commands
      • Playing a greeting in an app
    • Android
      • Building a voice assistant for an Android Java or Kotlin app
      • Navigating in an Android app with voice (Kotlin)
      • Passing the app state to the dialog script (Kotlin)
      • Sending data from the app to the dialog script (Kotlin)
    • Flutter
      • Building a voice assistant for a Flutter app
      • Navigating between screens
      • Passing the app state to the dialog script
      • Sending data to the dialog script
    • Ionic
      • Building a voice assistant for an Ionic Angular app
      • Navigating between tabs (Ionic Angular)
      • Passing the app state to the dialog script (Ionic Angular)
      • Building a voice assistant for an Ionic React app
      • Navigating between tabs (Ionic React)
    • React Native
      • Building a voice assistant for a React Native app
      • Sending commands to the app
      • Passing the app state to the dialog script
      • Triggering activities without voice commands
      • Navigating between screens with voice
  • App showcase
    • Appointment scheduling app (React)
    • Shrine e-commerce app (Flutter)
    • Food delivery app (Ionic)
    • Order drinks app (Angular)
  • FAQ
  • Alan AI examples
    • Dialog script examples
    • Integration code examples
  • Videos
    • Alan AI Studio videos
    • Alan AI Platform videos
    • Integration videos
    • Voice-enabled apps
    • Alan AI Udemy course (web app)
  • Multimodal conversations design guide
    • Planning and drafting
    • Building the dialog
    • Testing
    • Preparing for rollout and releasing
    • Analyzing users' behavior
  • Alan AI cheat sheet

Navigating between screens (Flutter)¶

If your Flutter app has several screens, you can add voice commands to navigate through the app. For example, if the app shows a list of products, you may let the user open product details and then go back to the products list with voice. In this tutorial, we will add a new screen to our simple Flutter app and create voice commands to navigate between the app screens.

YouTube

If you are a visual learner, watch this tutorial on Alan AI YouTube Channel.

What you will learn¶

  • How to send commands to a Flutter app

  • How to handle commands on the Flutter app side

  • How to navigate between screens of a Flutter app with voice

What you will need¶

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

  • You have completed the following tutorial: Building a voice assistant for a Flutter app.

  • 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 dialog script run in the Alan AI Cloud.

Step 1: Add a new screen to the Flutter app¶

Note

This step is required if you are using the Flutter app created in the previous tutorial. You can also use your own app with several screens. In this case, skip this step and go to step 2.

In the Building a voice assitant for a Flutter app tutorial, we have created a single-screen Flutter app with the Alan AI button. Now let’s add a new screen to this app.

  1. Open the app, go to the main.dart file and add the code for the second screen:

    main.dart¶
    /// Add the second screen
    class SecondPage extends StatefulWidget {
      const SecondPage({Key? key}) : super(key: key);
    
      @override
      _SecondPageState createState() => _SecondPageState();
    }
    
    class _SecondPageState extends State<SecondPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter Demo Second Page"),
          ),
          body: Center(
            child: ElevatedButton(
                child: Text("Go back"),
                onPressed: () {
                  Navigator.pop(context);
                }
            ),
          ),
        );
      }
    }
    
  2. In the MaterialApp constructor, define the app routes:

    main.dart¶
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
          /// Define the app routes
          initialRoute: '/',
          routes: {
            '/second': (context) => const SecondPage(),
          }
        );
      }
    }
    
  3. The second screen contains only one button that brings us back to the home screen. Let’s also add a button to the home screen to navigate to the second screen. To the body of the home screen, add the following button code:

    main.dart¶
    @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(
              children: <Widget>[
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
                /// Add a button
                ElevatedButton(
                  child: Text("Open the second screen"),
                  onPressed: () {
                    Navigator.pushNamed(context, '/second');
                  }
                ),
              ],
            ),
          ),
        );
      }
    

You can test it: run the app. Now our app has two screens, and we can navigate between them. Tap the Open the second screen and Go back buttons to go to the second screen and back.

Step 2: Add voice commands for navigation¶

We need to add new commands to the dialog to navigate between screens with voice. In Alan AI Studio, open the project and in the code editor, add the following intents:

Dialog script¶
intent('Open the second screen', p => {
    p.play({command: 'forward'});
    p.play('Opening the second screen');
});

intent('Go back', p => {
    p.play({command: 'back'});
    p.play('Going back');
});

Now, when we say one of these commands to the app, two things happen:

  • Alan AI sends the command provided in the intent to the Flutter app. To send the command, we need to specify a JSON object in the p.play function. In this tutorial, the object contains the command name.

  • The AI assistant plays back the action confirmation to us.

Step 3: Handle commands on the app side¶

When we say Open the second screen or Go back, Alan AI sends a command to the Flutter app. We need to handle this command on the app side and make sure an appropriate action is performed. To do this, we will add a handler in the app.

  1. In the main.dart file, update the onCommand handler:

    main.dart¶
    class _MyHomePageState extends State<MyHomePage> {
      _MyHomePageState() {
        AlanVoice.addButton(
          "976d23299e2cfbc77d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
          buttonAlign: AlanVoice.BUTTON_ALIGN_LEFT);
    
        /// Update the onCommand handler
        AlanVoice.onCommand.add((command) => _handleCommand(command.data));
      }
    }
    
  2. To the _MyHomePageState class, add the _handleCommand() function to handle commands passed from the dialog script:

    main.dart¶
    void _handleCommand(Map<String, dynamic> command) {
      switch(command["command"]) {
        case "forward":
          Navigator.pushNamed(context, '/second');
          break;
        case "back":
          Navigator.pop(context);
          break;
        default:
          debugPrint("Unknown command");
      }
    }
    

Here is how it works: when the Flutter app receives some command from the dialog script, _handleCommand is invoked. If the sent command is forward, the second screen is open. If the sent command is back, we are brought to the home screen in the app.

You can test it: run the app on the device, tap the Alan AI button and say: Open the second screen. Then say Go back.

What’s next?¶

Have a look at the next tutorial: Passing the app state to the dialog script.

Next
Passing the app state to the dialog script (Flutter)
Previous
Building a voice assistant for a Flutter app
Alan AI® is a trademark of Alan AI, Inc. Handcrafted in Sunnyvale, California
Download Alan Playground to see how Conversational Voice Experiences can add value to your application or test your Alan Studio Projects.
On this page
  • Navigating between screens (Flutter)
    • What you will learn
    • What you will need
    • Step 1: Add a new screen to the Flutter app
    • Step 2: Add voice commands for navigation
    • Step 3: Handle commands on the app side
    • What’s next?