SDK Configuration

1. Open the file ./lib/main.dart, or the file which contains the runApp method call.

2. Locate the main()function. Locate the runApp method call, and the Widget which is passed in, for example, MyApp, App etc. We refer to this as the ROOT WIDGET. If this widget is one you have declared inside your own code, move on to step 3. Continue reading this step if your main() function directly returns a third party widget such as this example returning MaterialApp:

    void main() {
      runApp(const MaterialApp(
        title: 'Navigation Basics',
        home: FirstRoute(),
      ));
    }

   You must first extract MaterialApp into its own Widget. You can use VSCode and the Refactor menu to easily achieve this task. Place the cursor in the Widget's symbol, e.g. MaterialApp, pull up the Refactor menu, and select Extract Widget. Type RootWidget or a name of your choosing, and press Enter. Here is what our example now looks like:

    void main() {
      runApp(RootWidget());
    }
   
    class RootWidget extends StatelessWidget {
      const RootWidget({
        super.key,
      });
   
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: 'Navigation Basics',
          home: FirstRoute(),
        );
      }
    }

   We refer to RootWidget (or whatever you named your Widget), as ROOT WIDGET in the remainder of this tutorial.

3. Go to the class declaration of the ROOT WIDGET. This may be in a different file.

   If your ROOT WIDGET is App, this will look like one of the following:

   class App extends StatelessWidget {

   or

   class App extends StatefulWidget {

4. Add the following import statements at the top of the file containing the class declaration of the ROOT WIDGET:

   import 'package:flight_recorder/flight_recorder.dart';
   import 'package:flight_recorder/screen_recorder.dart';

5. If the ROOT WIDGET class extends StatefulWidget, move on to the step Option 1: Adding the SDK to a Stateful Root Widget.

   If the class extends StatelessWidget, move on to the step Option 2: Adding the SDK to a Stateful Root Widget.

Option 1: Adding the SDK to a Stateful Root Widget

Make sure you have followed the instructions at the top of the Launch FlightRecorder in your Flutter App section before following these instructions.

These instructions are for those projects where the main() function's runApp method call returns a widget which extends StatefulWidget. We refer to this widget as the ROOT WIDGET.

1. Open the file containing to the class declaration of the ROOT WIDGET. This is probably ./lib/main.dart.

2. Locate the implementation of createState() in the ROOT WIDGET class. If your ROOT WIDGET is MyApp, this might look like this:

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

   Identify the name of the class returned by the createState(). We refer to this as {ROOT WIDGET STATE SUBCLASS}. Go to the class declaration of the {ROOT WIDGET STATE SUBCLASS}. In our example, this is:

   class _MyAppState extends State<MyAppState> {

3. Inside the {ROOT WIDGET STATE SUBCLASS}, create the final _flightRecorderPlugin constant, and set it to FlightRecorder() as shown below in our example:

   class _MyAppState extends State<MyAppState> {
   
     final _flightRecorderPlugin = FlightRecorder(); // ← Add this constant
     
     // ...
   

4. Inside the {ROOT WIDGET STATE SUBCLASS}, implement initState as shown below, which initializes FlightRecorder. Replace YOUR_API_KEY with your projects API Key.

   class _MyAppState extends State<MyAppState> {
     
     final _flightRecorderPlugin = FlightRecorder();
     
     // ↓ Add this block
     @override
     void initState() {
       _flightRecorderPlugin.initFlightRecorder('YOUR_API_KEY'); // ← Replace with your own API Key
       super.initState();
     }
     
     // ...
   

5. Inside the {ROOT WIDGET STATE SUBCLASS}, locate the build() method. The build() method returns an instance of a Widget. You will need to wrap the returned widget with the ScreenRecorder widget. The ScreenRecorder widget has a flightRecorderPlugin property, which you will set to the _flightRecorderPlugin, and the child property which you will set to return the widget originally returned by the build() method. You can use VSCode and the Refactor menu to easily achieve this task. We will follow through an example, shown below, which returns a single widget, via MyWidget(). Whatever your app returns from your build() method, the principles remain the same.

   MyWidget example

   @override
   Widget build(BuildContext context) {
     return MyWidget();
   }

6. Place your cursor on the symbol after the return statement (MyWidget in our example), pull up the Refactor menu, and select Wrap with widget....Type ScreenRecorder, and press Enter. Here is what our example looks like, yours should also have the ScreenRecorder widget returned, and the original widget set to the value of the child property:

   @override
   Widget build(BuildContext context) {
     return ScreenRecorder(
       child: MyWidget(),
     );
   }

7. Insert a newline after the line return ScreenRecorder( and then insert flightRecorderPlugin: _flightRecorderPlugin, as shown below:

   @override
   Widget build(BuildContext context) {
     return ScreenRecorder(
       flightRecorderPlugin: _flightRecorderPlugin, // ← Insert this line
       child: MyWidget(),
     );
   }

You have finished! Run the app and you can shake or take a screenshot to capture the video content and send a report.

If you are running on iOS, you need to use a real device to see the screen recording. An Error: Unexpected Error with an error code of 260 will appear when shaking on an iOS simulator. On Android you can use an emulator or a real device.

Option 2: Adding the SDK to a Stateless Root Widget

Make sure you have followed the instructions at the top of the Launch FlightRecorder in your Flutter App section before following these instructions.

These instructions are for those projects where the main() function's runApp method call returns a widget which extends StatelessWidget. We refer to this wiget as the ROOT WIDGET.

1. Open the file containing to the class declaration of the ROOT WIDGET. This is probably ./lib/main.dart.

2. Locate the declaration of the ROOT WIDGET class. If your ROOT WIDGET is MyApp, this might look like this:

   class MyApp extends StatelessWidget {

3. Inside the ROOT WIDGET class, below the const {ROOT WIDGET}({super.key}) declaration, create a reference to flightRecorderPlugin as shown below, where ROOT WIDGET is MyApp.

   class MyApp extends StatelessWidget {
     const MyApp({
       super.key,
     });
     
     final FlightRecorder flightRecorderPlugin; // ← Insert
     
     // ...
     

4. Inside the same class, add the required this.flightRecorderPlugin property to the ROOT WIDGET function call:

   class MyApp extends StatelessWidget {
     const MyApp({
       super.key,
       required this.flightRecorderPlugin // ← Insert
     }); 

5. Go to the main() method. Update the call to your Widget (e.g. MyApp()), to pass in the property flightRecorderPlugin set to FlightRecorder() as per the below example:

   void main() {
     runApp(RootWidget(
       flightRecorderPlugin: FlightRecorder(), // ← Insert
     ));
   }

6. Inside the ROOT WIDGET class, below the flightRecorderPlugin declaration, insert the createElement override as shown below, replacing YOUR_API_KEY with the API Key for your project:

   class MyApp extends StatelessWidget {
     const MyApp({
       super.key, 
       required this.flightRecorderPlugin,
     });
     
     final FlightRecorder flightRecorderPlugin;
     
     // ↓ Add this block
     @override
     StatelessElement createElement() {
       flightRecorderPlugin.initFlightRecorder('YOUR_API_KEY');
       return super.createElement();
     }
     
     // ...
     

7. Inside the same class, find the build() method. The build() method returns an instance of a Widget. You will need to wrap the returned widget with the ScreenRecorder widget. The ScreenRecorder widget has a flightRecorderPlugin property, which you will set to the flightRecorderPlugin, and the child property which you will set to return the widget originally returned by the build() method. You can use VSCode and the Refactor menu to easily achieve this task. We will follow through an example, shown below, which returns a single widget, via MyWidget(). Whatever your app returns from your build() method, the principles remain the same.

   MyWidget example

   @override
   Widget build(BuildContext context) {
     return MyWidget();
   }

8. Place your cursor on the symbol after the return statement (MyWidget in our example), pull up the Refactor menu, and select Wrap with widget.... Type ScreenRecorder, and press Enter. Here is what our example looks like, yours should also have the ScreenRecorder widget returned, and the original widget set to the value of the child property:

   @override
   Widget build(BuildContext context) {
     return ScreenRecorder(
       child: MyWidget(),
     );
   }

9. Insert a newline after the code ScreenRecorder( and insert the flightRecorderPlugin: flightRecorderPlugin, line as shown below:

   @override
   Widget build(BuildContext context) {
     return ScreenRecorder(
       flightRecorderPlugin: flightRecorderPlugin, // ← Insert this line
       child: MyWidget(),
     );
   }

You have finished! Run the app and you can shake or take a screenshot to capture the video content and send a report.