How to compose video sources into a continuous video using ffmpeg etc.?

Question

I was making an OBS-like video composing application (using Flutter), which will:

• Use some dynamic / static media sources and compose them into one;
• Draw some flutter widgets to video as a dynamic source mentioned above; (50% done)
• Display the final composition on screen.

UPDATES:
I am trying to make an OBS-like app using Flutter. Generally I was intended to use Flutter widgets to be on-video widgets, which requires to draw widgets directly into the video rather than screen. Also, the composing of the widget layer and other layers is required.

🌟 Firstly, I tried to use RenderRepaintBoundary in "dart:ui" to get bytes as Uint8List of flutter widgets, and got my .png files.

I got png series via this method for next steps (performance inspect pending)

(relevant code)

// some_page.dart

int index = 0;

  Future<void> onTestPressed() async {
    int i = 0;
    while (i++ < 600) {
      try {
        var render = repaintKey.currentContext!.findRenderObject()
            as RenderRepaintBoundary;
        double dpr = window.devicePixelRatio;
        var byteData = await render
            .toImage(pixelRatio: dpr)
            .then((image) => image.toByteData(format: ImageByteFormat.png));

        var tempDir = await getTemporaryDirectory();
        var fileName = '${tempDir.path}/frame_${index++}';

        var bytes = byteData!.buffer.asUint8List();
        var file = File(fileName);
        if (!file.existsSync()) {
          file.createSync();
        }

        await file.writeAsBytes(bytes);
        // OpenFile.open(fileName);
      } catch (e) {
        if (kDebugMode) {
          print(e);
        }
      }
    }
  }

🌟 Secondly, I should transform the png files and use them as a source for making continuous video noted in title. (WIP🌟)

🌟 Thirdly, I will use the camera as a video source.

How could I use these sources, to make a longtime video and preview it as a live?

Thank you.