[Firebase Core] [Emulator] How to Initialize firebase to use emulator with demo project

[debkanchan]

It is recommended that we should use demo projects (projects starting with demo-) in emulators so that the app does not accidentally interact with live project resources.

However, I'm finding it difficult to setup flutter firebase to talk to the demo project. Even with FirebaseOptions provided it does not work correctly.

Flutter Setup:

await Firebase.initializeApp(
        options: const FirebaseOptions(
            apiKey: ... // Web API Key found in console
            appId: ... //Correct AppId copied from console
            messagingSenderId: ... // Web API Key found in console again,
            projectId: 'demo-project'));
            
final host = Platform.isAndroid ? 
  //local computer IP for testing on a real device
  : 'localhost';

FirebaseFirestore.instance.settings = Settings(
  host: '$host:8080',
  sslEnabled: false,
  persistenceEnabled: false,
);

await FirebaseAuth.instance.useAuthEmulator(host, 9099);

await FirebaseStorage.instance.useStorageEmulator(host, 9199);

Emulator startup command:
firebase emulators:start --export-on-exit=./data --import=./data --project demo-project

Expected Behaviour:
user accounts are created and visible
Firestore docs can be CRUD'ed and visible in emulator UI
storage items go to the default bucket

Actual Behaviour:
user accounts are created and visible
Firestore docs can be CRUD'ed but NOT visible in emulator UI
storage items go to real app bucket on emulator (real-app-id.appspot.com)