flight_recorder 0.0.2

flight_recorder: ^0.0.2 copied to clipboard

Delivering rich, cost-effective, in-context video of your users' experiences on your app. With just a shake, screenshot, or tap.

Installation #

flutter pub add flightrecorder

Usage #

Android #

To use android, you need to make the following updated to your android project.◊

1. Activity

You need to edit your android activity, and change it from extending FlutterActivity to a FlutterFragmentActivity.

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {


}

2. Update build.gradle

Update the minSdkVersion in the app/build.gradle to 21

minSdkVersion 21

Update/add compileSdk

android {
    ...
    compileSdk 34
}

3. Proguard rules

Add the following to your proguard rules

-keepclassmembers class * extends com.google.protobuf.GeneratedMessageLite {
  <fields>;
}

If you do not have a proguard-rules.pro file, create one in the following folder

android/app/proguard-rules.pro

iOS #

Requires no changes

Note : screen recording will not work on an emulator

Flutter #

Make the following updates to your flutter code.

Wrap the root of your render tree with the ScreenRecorder widget, passing your api key.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _flightRecorderPlugin = FlightRecorder();

  @override
  void initState() {
    /// init flight recorder
    _flightRecorderPlugin.initFlightRecorder('YOUR_API_KEY');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    /// Wrap your home with ScreenRecorder widget, passing the flight recorder pluging reference
    return MaterialApp(
        home: ScreenRecorder(
            flightRecorderPlugin: _flightRecorderPlugin, child: _demo()));
  }

  Widget _demo() {
    return Scaffold(
        floatingActionButton: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FloatingActionButton(
              onPressed: () {
                _flightRecorderPlugin.triggerCaptureRecording();
              },
              child: const Icon(Icons.upload_file),
            ),
            const SizedBox(width: 8),
            FloatingActionButton(
              onPressed: () {
                _flightRecorderPlugin.showIntroductionScreen();
              },
              child: const Icon(Icons.info_outline),
            )
          ],
        ),
        body: const Center(child: Text("FlightRecorder")));
  }
}

If you are using a Router, add a builder to wrap the root with the Screen Recorder.

@override
Widget build(BuildContext context) {
  return MaterialApp.router(
    title: 'FR Sample',
    routerConfig: router,
    builder: (context, child) {
      return ScreenRecorder(
          flightRecorderPlugin: _flightRecorderPlugin, child: child!);
    },
  );
}