Skip to content

Flutter User Manual

Business Card and Image target Demo

To demostrate the use of AR and QR code scanning, you can download the following image target. You could print them out as business cards, or display them on another device (such as iPad or another phone).

Download the demo for printing (pdf)

Download or View the Application

Flutter Mobile App - Download for Android (*.apk) - More Releases - Alternative onedrive link

Register and Login

You can view and interact with AR avatars even without login. However, to have the best user experiences, you should register or login before use.

If you are not logged in, in the main page, tap either list or profile button will redirect you to the login page. You can now create your account or loggin to existing account.

You can use the demo accounts listed below (use email and password to login):

Username Email Password
jonmcnamara john@ucl.ac.uk password
amy-pajak amy@ucl.ac.uk password
ben-jones ben@ucl.ac.uk password

When you register, you will be automatically logged in.

First Launch

Install the APK file on your Android device. Tap the icon to launch the app.

You should see three popup asking for camera, microphone and storage permissions. You should agree with all of them, otherwise the app might not run correctly.

Info

In unlikely event, you might need to relaunch your app after granting part of the permissions.

View Avatar

  • In the QR code scanning page, scan the QR code on your business card. Or tap "demo" to view the demo card.

QR

Info

If you do not own an AR business card, you can download it in the Files section of this documentation.

  • You should now enter the AR page. Follow the instruction and scan the back of the business card, you should now see an AR avatar on top of the physical card.
  • If you don't have a phsycial business card for AR tracking, click here to download

QR

  • You can switch between the AR scene and the 3D non-AR scene by toggling the AR button.
  • You can see the user profile page by tapping the profile picture.
  • You can go back by tapping the exit button.

Chat

  • Tap the mic icon to speak, You can also for:
    • General Description
    • Work Experience
    • Education
    • Email
    • Phone
    • Website (Facebook, Linkedin)
    • and more...
  • The avatar will reply with the answer.
  • Double tap the chat bubble or chat icon to expand or shrink the bubbles.
  • When the avatar is speaking, you can tap the stop icon to stop.
  • You can tap the cancel icon if you want to cancel the voice recoginition.

History and Favourites

QR

  • Tap the favourite icon to favourite a user or card
  • In the scanning or AR page, tap the list icon (bottom left) to open history list
  • You will see a history of scanned card
  • You can swipe to switch between history, favourite page and back.
  • You can long press the list item to unfavourite or remove from history.
  • You can search in the list by tapping the search icon.
  • You can tap the list item to see detail of the user
  • In the detail page, you can quickly contact the card owner.

Update or Create Your Own Card Profile

QR

  • In the scanning or AR page, tap the user icon (bottom right) to open your profile
  • Here, You can edit your personal information, view your own avatar, download your QR code, or logout.
  • You can upload a new profile picture and crop it by clicking your profile photo.
  • You must tap save to save any changes.
  • You can change your 3D avatars here.
  • You can download your QR code by clicking the view QR button, you can share it with friends, or print it on your business card, to let others view and interact with your AR business card.
  • You can preview your profile or avatar by tapping the "My profile" and "My avatar" button.
  • You can logout of all devices (all other web or app) by tapping "logout all".