SDK Configuration
Last updated
Last updated
Open the file ./lib/main.dart
, or the file which contains the runApp method call.
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:
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:
We refer to RootWidget
(or whatever you named your Widget), as ROOT WIDGET in the remainder of this tutorial.
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:
or
Add the following import statements at the top of the file containing the class declaration of the ROOT WIDGET:
If the ROOT WIDGET class extends StatefulWidget, move on to the step
If the class extends StatelessWidget, move on to the step
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.
Open the file containing to the class declaration of the ROOT WIDGET. This is probably ./lib/main.dart
.
Locate the implementation of createState()
in the ROOT WIDGET class. If your ROOT WIDGET is MyApp, this might look like this:
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:
Inside the {ROOT WIDGET STATE SUBCLASS}, create the final
_flightRecorderPlugin
constant, and set it to FlightRecorder()
as shown below in our example:
Inside the {ROOT WIDGET STATE SUBCLASS}, implement initState
as shown below, which initializes FlightRecorder. Replace YOUR_API_KEY
with your projects API Key.
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.
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:
Insert a newline after the line return ScreenRecorder(
and then insert flightRecorderPlugin: _flightRecorderPlugin,
as shown below:
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.
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.
Open the file containing to the class declaration of the ROOT WIDGET. This is probably ./lib/main.dart
.
Locate the declaration of the ROOT WIDGET class. If your ROOT WIDGET is MyApp
, this might look like this:
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
.
Inside the same class, add the required this.flightRecorderPlugin
property to the ROOT WIDGET function call:
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:
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:
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.
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:
Insert a newline after the code ScreenRecorder(
and insert the flightRecorderPlugin: flightRecorderPlugin,
line as shown below:
You have finished! Run the app and you can shake or take a screenshot to capture the video content and send a report.
Make sure you have followed the instructions at the top of the section before following these instructions.
Make sure you have followed the instructions at the top of the section before following these instructions.