After carefully going through the docs here, I got it working by configuring the host setting on the firestore instance:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:tracker/screens/screens.dart';

void main() async {

  // This will set the app to communicate with localhost
  await Firestore.instance.settings(host: "10.0.2.2:8080", sslEnabled: false);

  runApp(AppSetupScreen());
}

Note: This will only work with emulator and not with physical device.

An add-on:

To make the Firebase emulators work with the physical devices

Work for both iOS and Android devices

1. Cloud functions setup:

in firebase.json

{
  // ...other configs
  "emulators": {
    "functions": {
      "port": 5001,
      "host": "0.0.0.0" // must have
    },
    "firestore": {
      "port": 8080,
      "host": "0.0.0.0" // must have
    },
  }
}

2. Your Flutter app setup:

The IP address you use for cloud functions and firestore should be the same

// The FirebaseFunctions config
// ! You need to replace the placeholder with your IP address below:
FirebaseFunctions.instance.useFunctionsEmulator(origin: 'http://<YOUR_IP_ADDRESS>:5001');

// The Firestore config
// ! You need to replace the placeholder with your IP address below:
FirebaseFirestore.instance.settings = Settings(
  host: '<YOUR_IP_ADDRESS>:8080',
  sslEnabled: false,
  persistenceEnabled: false,
);

for cloud_firestore: ^0.14.1+2, instead of using FirebaseFirestore.instance.settings use this -

FirebaseFunctions.instance.useFunctionsEmulator(
    origin: "http://localhost:5001",
  );

It internally handles setting up 10.0.2.2 if the device is android.

Your main block should look like the following

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseFunctions.instance.useFunctionsEmulator(
    origin: "http://localhost:5001",
  );
  runApp(MyApp());
}

My init function looks like so:

init_firebase.dart

Future<void> initFirebase() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  if (!kReleaseMode) {
    try {
      await Future.wait([
        FirebaseAuth.instance.useAuthEmulator('localhost', 9099),
        FirebaseStorage.instance.useStorageEmulator('localhost', 9199),
      ]);

      FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);
      FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
    } catch (e) {}
  }
}

By using !kReleaseMode, we don't have to have a boolean that we switch each time. It will just use emulator by default during development

By wrapping it in try-catch block we avoid some errors from hot reload

Looks like i've connected ios to localhost:8080, but db works very slow and I also didn't notice any logs in a file. @UsmanZaheer, can you please tell when did it write logs and was it working fast?

Steps:

• firebase init

• add links that have been created by ini to package.json in functions;

  "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" },

• firebase emulators:start

in main() write

await Firestore.instance.settings(
      host: 'http://localhost:8080',
      sslEnabled: false,
      persistenceEnabled: false,
      timestampsInSnapshotsEnabled: true
  ).catchError((e) => print(e));

Adjustment for Flutter Web

addition to the correct answer by @Sultanmyrza

Platform requires dart:io/dart:html which are mutually exclussive so to check for the platform I use kIsWeb

FirebaseFirestore __firestore;
FirebaseFirestore get _firestore {
  if (__firestore != null) {
    return __firestore;
  }
  debugPrint('isFirebaseEmulator: $isFirebaseEmulator');
  __firestore = FirebaseFirestore.instance;
  if (isFirebaseEmulator) {
    __firestore.settings = const Settings(
      host: kIsWeb ? 'localhost:8080' : '10.0.2.2:8080',
      sslEnabled: false,
    );
  }
  return __firestore;
}

Latest Update: To connect flutter app to your local firebase emulator suite, follow this official instruction for configuration.

None of the above suggestions work with real device connecting to firebase emulator. the app connect with the real device and allows one to log in (even via sms - the emulator sends the code to its console without issue, but all over a sudden:

SocketException (SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 44224)

there is no where I have localost. On web it works perfectly, on firebase json, I have the broadcast IP 0.0.0.0, and on main, the IP address of the laptop, I have allowed ports for the firewall (in fact allowed all to avoid reasoning as a firewall issue), am connecting to the phone wireless network, so am on ip: 192.168.43.1, the same gateway for the laptop. the laptop is on 192.168.43.81.

So, not sure why the connection points to the localhost, and does not connect as long as the images are to be displayed...

any update on how to configure firebase emulators to connect to real device as latest as June 2023?

Your main.dart should look like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firestore.instance
    .settings(
       host: 'http://localhost:8080',
       sslEnabled: false,
       persistenceEnabled: false,
     )
    .catchError((e) => print(e));
  // 
  // ...
  //
  runApp(App(...));
}

in your firebase.json file

  "emulators": {
    "firestore": {
          "host": "localhost",
          "port": 8080
    },
    ...
  }

you should also set the following in your terminal:

export FIRESTORE_EMULATOR_HOST=localhost:8080

and then run

firebase emulators:start