Holobooth

A Holobooth built with Flutter, Firebase, and TensorFlow for Flutter Forward.

Try it now and learn about how it's made.

Built by Very Good Ventures in partnership with Google

Created using Very Good CLI 🤖

---

Getting Started 🚀

To run the desired project either use the launch configuration in VSCode/Android Studio or use the following commands:

$ flutter run -d chrome -t lib/main_dev.dart

*Holobooth works on Web.

---

Running Tests 🧪

To run all unit and widget tests use the following command:

$ flutter test --coverage --test-randomize-ordering-seed random

To view the generated coverage report you can use lcov.

# Generate Coverage Report
$ genhtml coverage/lcov.info -o coverage/
# Open Coverage Report
$ open coverage/index.html

---

Working with Translations 🌐

This project relies on flutter_localizations and follows the official internationalization guide for Flutter.

Adding Strings

1. To add a new localizable string, open the app_en.arb file at lib/l10n/arb/app_en.arb.

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}

2. Then add a new key/value and description

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    },
    "helloWorld": "Hello World",
    "@helloWorld": {
        "description": "Hello World Text"
    }
}

3. Use the new string

import 'package:holobooth/l10n/l10n.dart';

@override
Widget build(BuildContext context) {
  final l10n = context.l10n;
  return Text(l10n.helloWorld);
}

Adding Translations

1. For each supported locale, add a new ARB file in lib/l10n/arb.

├── l10n
│   ├── arb
│   │   ├── app_en.arb
│   │   └── app_es.arb

2. Add the translated strings to each .arb file:

app_en.arb

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}

app_es.arb

{
    "@@locale": "es",
    "counterAppBarTitle": "Contador",
    "@counterAppBarTitle": {
        "description": "Texto mostrado en la AppBar de la página del contador"
    }
}

---

Working with Mason 🧱

This project relies on mason to create and consume reusable templates called bricks. For additional documentation see BrickHub.

1. Install mason from pub:

dart pub global activate mason_cli

2. Check the current project bricks:

mason list

3. Add your own bricks:

mason add bloc

4. Generate code from a brick:

mason make bloc

Note

Mason support for Visual Studio Code can be found here.

---

Debug web app on iPhone

To debug the web app on the iPhone, we need to run it as https, because without that, the iPhone won't let us use the camera. We also need to configure Safari to use the phone's developer tools.

Configure https server

1. Install http-server from npm:

npm install -g http-server

2. Execute these commands

cd ~/
mkdir .localhost-ssl
sudo openssl genrsa -out ~/.localhost-ssl/localhost.key 2048
sudo openssl req -new -x509 -key ~/.localhost-ssl/localhost.key -out ~/.localhost-ssl/localhost.crt -days 3650 -subj /CN=localhost
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ~/.localhost-ssl/localhost.crt

3. Build web project

flutter build web --web-renderer canvaskit

5. Go to the generated directory

cd {project_dir}/build/web

6. Run server

http-server --ssl --cert ~/.localhost-ssl/localhost.crt --key ~/.localhost-ssl/localhost.key

Configure Safari to listen for logs

1. On Mac

Open Safari > Preferences > Advanced > enable "Show Develop menu in menu bar"

2. On iPhone

Open Settings > Safari > Advanced > enable "Web Inspector"

3. Connect your device to your Mac using a USB cable.

4. Open Safari on iOS and enter the server address, for example https://192.168.1.1:8080

5. On Mac

Safari > Develop > Find "YourPhoneName" > Select the URL entered earlier, for example 192.168.1.1

Assets generation

We rely on fluttergen to generate the assets. Everytime a new asset folder is added, we should:

1. Add the folder to the pubspec.yaml

flutter:
  assets:
    - assets/backgrounds/
    - assets/icons/
    - assets/audio/
    - assets/characters/

2. Run fluttergen on the console
3. Use the asset

Assets.nameOfTheFolder.nameOfTheAsset

Note: Step one can be skipped if the folder is already added to the pubspec.yaml.

Test Assets LICENSE

In order to properly test the face recognition feature, this project uses free photos downloaded from Unsplash released under their Unsplash Licence.

Those assets can be found at packages/tensorflow_models/tensorflow_models_web/test/test_assets/, and the links from each individual image on the LICENSE file under that same folder.

---