Flutter 中如何使用 Firebase Analytics？

推荐答案

// www.javascriptcn.com code example
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

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

class MyHomePage extends StatelessWidget {
  final FirebaseAnalytics analytics = FirebaseAnalytics();

  void _logEvent() async {
    await analytics.logEvent(
      name: 'button_click',
      parameters: <String, dynamic>{
        'button_name': 'example_button',
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _logEvent,
          child: Text('Log Event'),
        ),
      ),
    );
  }
}

本题详细解读

1. 初始化 Firebase

在 Flutter 中使用 Firebase Analytics 的第一步是初始化 Firebase。你需要在 main 函数中调用 Firebase.initializeApp() 来初始化 Firebase。确保在 runApp() 之前调用此方法。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

2. 添加 Firebase Analytics 依赖

在 pubspec.yaml 文件中添加 firebase_core 和 firebase_analytics 依赖。

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.0.0
  firebase_analytics: ^8.0.0

3. 创建 FirebaseAnalytics 实例

在 MyApp 和 MyHomePage 中创建 FirebaseAnalytics 实例。这个实例将用于记录事件和设置用户属性。

final FirebaseAnalytics analytics = FirebaseAnalytics();

4. 添加 FirebaseAnalyticsObserver

为了自动记录页面视图事件，你可以在 MaterialApp 的 navigatorObservers 中添加 FirebaseAnalyticsObserver。

navigatorObservers: [
  FirebaseAnalyticsObserver(analytics: analytics),
],

5. 记录自定义事件

你可以使用 analytics.logEvent() 方法来记录自定义事件。例如，记录一个按钮点击事件：

void _logEvent() async {
  await analytics.logEvent(
    name: 'button_click',
    parameters: <String, dynamic>{
      'button_name': 'example_button',
    },
  );
}

6. 设置用户属性

你还可以使用 analytics.setUserProperty() 方法来设置用户属性。

await analytics.setUserProperty(name: 'favorite_food', value: 'pizza');

7. 记录屏幕视图

如果你没有使用 FirebaseAnalyticsObserver，你可以手动记录屏幕视图：

await analytics.setCurrentScreen(screenName: 'HomePage');

通过这些步骤，你可以在 Flutter 应用中成功集成并使用 Firebase Analytics 来跟踪用户行为和应用性能。