[Flutter] Firebase Analytics

2021-05-12 hit count image

In this blog post, I will show you how to use Filebase Analytics in Flutter.

Outline

In this blog post, I will introduce how to configure Firebase Analytics to analyze the user behavior patterns in Flutter.

To use Firebase Analytics in Flutter, we need to install the firebase_analytics package. In this blog post, I will show you how to configure the firebase_analytics package and how to use it.

Blog series

This blog post is a series. You can see the other posts on the link below.

Create and configure Firebase project

To use Firebase in Flutter, we need to create Firebase project, and install the firebase_core package. See the details on the link below.

Install firebase_analytics

To use Firebase Analytics in Flutter, we need to install the firebase_analytics package. Execute the command below to install the firebase_analytics package.

flutter pub pub add firebase_analytics

How to use firebase_analytics

If you use the firebase_analytics package like below in Flutter, when the screen is changed, you can write the event to Firebase Analytics.

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
      initialRoute: 'Category',
      routes: {'Category': (context) => Categories()},
    );
  }
}

Custom Event

You can make a custom event and use it like below.

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Analytics Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [observer],
      home: Home(
        analytics: analytics,
      ),
    );
  }
}

class Home extends StatefulWidget {
  Home({this.analytics})
      : super();

  final FirebaseAnalytics analytics;

  @override
  _HomeState createState() => _HomeState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = '';

  void setMessage(String message) {
    setState(() {
      _message = message;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          MaterialButton(
            onPressed: _sendAnalyticsEvent,
            child: const Text('Test logEvent'),
          ),
          Text(_message,
              style: const TextStyle(color: Color.fromARGB(255, 0, 155, 0))),
        ],
      ),
    );
  }
}

Complete

Done! we’ve seen how to configure and use the firebase_analytics package to use Firebase Analytics in Flutter. Now, you can analyze the user behavior patterns via Firebase Analytics!

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts