Ad

How To Set Firebase Analytics Custom Events In Flutter Without Passing 'analytics/observer' Object In Each Screen

I'm setting up Firebase Analytics Package for my Flutter project. The sample provided in the library passes the analytics object for tracking events and observer for tracking the tab changes.

class MyApp extends StatelessWidget {
 ...
Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Analytics Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: <NavigatorObserver>[observer],
      home: MyHomePage(
        title: 'Firebase Analytics Demo',
        analytics: analytics,
        observer: observer,
      ),
    );
  }
}

...

class _MyHomePageState extends State<MyHomePage> {
...
Future<void> _sendAnalyticsEvent() async {
    await analytics.logEvent(
      name: 'test_event',
      parameters: <String, dynamic>{
        'string': 'string',
        'int': 42,
        'long': 12345678910,
        'double': 42.0,
        'bool': true,
      },
    );
    setMessage('logEvent succeeded');
  }
...
}

My app consists of a lot of screens where the state is managed via a Bloc package. Passing these objects from mainScreen all the way down the tree where the events are happening would not be good.

Is there a way to access them without passing them around the widget tree. Or would it work if I create a new object of the class FirebaseAnalytics and use the generated object to set an event?

static FirebaseAnalytics analytics = FirebaseAnalytics();

Or should I use Flutter_Bloc as a central place to log and set my Flutter Events?

Ad

Answer

You can use the provider package to 'provide' both your analytics and observer down your widget tree.

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
            Provider<FirebaseAnalytics>.value(value: analytics),
            Provider<FirebaseAnalyticsObserver>.value(value: observer),
        ],
        child: MaterialApp(
            title: 'Firebase Analytics Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            navigatorObservers: <NavigatorObserver>[observer],
            home: MyHomePage(
                title: 'Firebase Analytics Demo',
            ),
        ),
    ); 
  }
}

Then in any of your child widgets...

Future<void> _sendAnalyticsEvent() async {
    FirebaseAnalytics analytics = Provider.of<FirebaseAnalytics>(context);
    await analytics.logEvent(
      name: 'test_event',
      parameters: <String, dynamic>{
        'string': 'string',
        'int': 42,
        'long': 12345678910,
        'double': 42.0,
        'bool': true,
      },
    );
    setMessage('logEvent succeeded');
  }

Now you don't need to pass your Firebase instances to the widget constructors.

Ad
source: stackoverflow.com
Ad