• This repository has been archived on 14/Aug/2023
  • Stars
    star
    230
  • Rank 170,279 (Top 4 %)
  • Language
    Dart
  • License
    MIT License
  • Created almost 2 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Jump into a new reality to bring Dash and Sparky to life!

Holobooth

Holobooth Header

build status coverage style: very good analysis License: MIT

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"
    }
}
  1. 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"
    }
}
  1. 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
  1. 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
  1. Check the current project bricks:
mason list
  1. Add your own bricks:
mason add bloc
  1. 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
  1. 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
  1. Build web project
flutter build web --web-renderer canvaskit
  1. Go to the generated directory
cd {project_dir}/build/web
  1. 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"
  1. On iPhone
Open Settings > Safari > Advanced > enable "Web Inspector"
  1. Connect your device to your Mac using a USB cable.

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

  3. 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/
  1. Run fluttergen on the console
  2. 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.


More Repositories

1

flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Dart
157,868
star
2

plugins

Plugins for Flutter maintained by the Flutter team
Dart
17,165
star
3

samples

A collection of Flutter examples and demos
Dart
15,939
star
4

engine

The Flutter engine
C++
6,852
star
5

gallery

Flutter Gallery is a resource to help developers evaluate and use Flutter
Dart
5,866
star
6

packages

A collection of useful packages maintained by the Flutter team
Dart
3,600
star
7

website

Flutter documentation web site
Dart
2,573
star
8

pinball

Google I/O 2022 Pinball game built with Flutter and Firebase
Dart
2,097
star
9

flutter-intellij

Flutter Plugin for IntelliJ
Java
1,906
star
10

codelabs

Flutter codelab examples
C
1,568
star
11

devtools

Performance tools for Flutter
Dart
1,466
star
12

news_toolkit

A news template application built in Flutter, by Google and Very Good Ventures. Learn more at: https://flutter.github.io/news_toolkit
Dart
1,016
star
13

photobooth

Google I/O 2021 Photo Booth built with Flutter and Firebase
Dart
894
star
14

io_flip

Google I/O 2023 FLIP AI-designed card game built with Flutter & Firebase
Dart
597
star
15

flutter_clock

Dart
542
star
16

put-flutter-to-work

A Flutter add-to-app demo you can try with your own apps
Dart
309
star
17

tests

Contributed tests for Flutter
Dart
219
star
18

uxr

UXR work for Flutter
Dart
214
star
19

cocoon

Flutter's build coordinator and aggregator
Dart
182
star
20

impeller

Affects Flow
155
star
21

buildroot

Build environment for the Flutter engine
Python
120
star
22

assets-for-api-docs

Static assets for embedding into docs.flutter.io
Dart
113
star
23

tools_metadata

Metadata files about the flutter framework
Dart
66
star
24

web_installers

Web install scripts for CI for Flutter Web
Dart
42
star
25

goldens

Shell
41
star
26

platform_tests

Tools & tests to verify Flutter's fidelity on specific platforms
Dart
37
star
27

games

Home of the Flutter Casual Games Toolkit and other Flutter gaming templates
Dart
27
star
28

.github

Default community health files for Flutter
26
star
29

flutter-github-scripts.dart

Scripts to facilitate generating reports on the health of the Flutter repositories.
Dart
19
star
30

flutter.github.io

Root of flutter.github.io
HTML
13
star