SDK Configuration
Open the file
./lib/main.dart
, or the file which contains the runApp method call.Locate the
main()
function. Locate therunApp
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 yourmain()
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.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 {
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';
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.
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:@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> {
Inside the {ROOT WIDGET STATE SUBCLASS}, create the
final
_flightRecorderPlugin
constant, and set it toFlightRecorder()
as shown below in our example:class _MyAppState extends State<MyAppState> { final _flightRecorderPlugin = FlightRecorder(); // ← Add this constant // ...
Inside the {ROOT WIDGET STATE SUBCLASS}, implement
initState
as shown below, which initializes FlightRecorder. ReplaceYOUR_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(); } // ...
Inside the {ROOT WIDGET STATE SUBCLASS}, locate the
build()
method. Thebuild()
method returns an instance of a Widget. You will need to wrap the returned widget with theScreenRecorder
widget. TheScreenRecorder
widget has aflightRecorderPlugin
property, which you will set to the_flightRecorderPlugin
, and thechild
property which you will set to return the widget originally returned by thebuild()
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, viaMyWidget()
. Whatever your app returns from yourbuild()
method, the principles remain the same.@override Widget build(BuildContext context) { return MyWidget(); }
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 theScreenRecorder
widget returned, and the original widget set to the value of thechild
property:@override Widget build(BuildContext context) { return ScreenRecorder( child: MyWidget(), ); }
Insert a newline after the line
return ScreenRecorder(
and then insertflightRecorderPlugin: _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.
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:class MyApp extends StatelessWidget {
Inside the ROOT WIDGET class, below the
const {ROOT WIDGET}({super.key})
declaration, create a reference to flightRecorderPlugin as shown below, where ROOT WIDGET isMyApp
.class MyApp extends StatelessWidget { const MyApp({ super.key, }); final FlightRecorder flightRecorderPlugin; // ← Insert // ...
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 });
Go to the
main()
method. Update the call to your Widget (e.g.MyApp()
), to pass in the propertyflightRecorderPlugin
set toFlightRecorder()
as per the below example:void main() { runApp(RootWidget( flightRecorderPlugin: FlightRecorder(), // ← Insert )); }
Inside the ROOT WIDGET class, below the
flightRecorderPlugin
declaration, insert thecreateElement
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(); } // ...
Inside the same class, find the
build()
method. Thebuild()
method returns an instance of a Widget. You will need to wrap the returned widget with theScreenRecorder
widget. TheScreenRecorder
widget has aflightRecorderPlugin
property, which you will set to theflightRecorderPlugin
, and thechild
property which you will set to return the widget originally returned by thebuild()
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, viaMyWidget()
. Whatever your app returns from yourbuild()
method, the principles remain the same.@override Widget build(BuildContext context) { return MyWidget(); }
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 theScreenRecorder
widget returned, and the original widget set to the value of thechild
property:@override Widget build(BuildContext context) { return ScreenRecorder( child: MyWidget(), ); }
Insert a newline after the code
ScreenRecorder(
and insert theflightRecorderPlugin: 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.
Last updated