AppBar not visible when rendering an architect widget having a live camera feed

Question

In a flutter app I have created an Android view that displays a camera screen and i have an app bar but the app bar is hidden behind the camera view and i am not able to bring it to front.

The camera field is a widget using Android View

Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: false,
      appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          shadowColor: Colors.transparent,
          title: Text(
            'App Bar',
            style: const TextStyle(color: Colors.black),
          ),
          automaticallyImplyLeading: false),
      body: WillPopScope(
        onWillPop: () async {
          if (defaultTargetPlatform == TargetPlatform.android && !loadFailed) {
            bool? canWebViewGoBack = await architectWidget.canWebViewGoBack();
            if (canWebViewGoBack != null) {
              return !canWebViewGoBack;
            } else {
              return true;
            }
          } else {
            return true;
          }
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: architectWidget,
            ),
            Row(children: [
              Expanded(
                  child: TextButton.icon(
                onPressed: () {
                  startScan();
                },
                style: TextButton.styleFrom(
                    backgroundColor: const Color.fromARGB(255, 40, 135, 212),
                    shape: const RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.all(Radius.elliptical(20, 20)))),
                icon: const Icon(
                  Icons.play_circle_outlined,
                  size: 24.0,
                  color: Colors.black,
                ),
                label: const Text(
                  'Start',
                  style: TextStyle(color: Colors.black, fontSize: 15),
                ),
              )),
            ]),
          ],
        ),
      ),
    );
  }

Below is the code for the architectWidget which displays the camera screen

Widget build(BuildContext context) {
    if(defaultTargetPlatform == TargetPlatform.android) {
      return AndroidView(
        viewType: 'architectwidget',
        onPlatformViewCreated: onPlatformViewCreated,
        creationParams: configuration,
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else if(defaultTargetPlatform == TargetPlatform.iOS) {
      return UiKitView(
        viewType: 'architectwidget',
        onPlatformViewCreated: onPlatformViewCreated,
        creationParams: configuration,
        creationParamsCodec: const StandardMessageCodec(),
      );
    }

    return new Text('$defaultTargetPlatform is not yet supported by this plugin');
  }

I tried using different layouts but it is still the same. I also tried to hardcode a label using html and css but it also went behind.

Answer 1

Try using Stack class to layer your AppBar and AndroidView. The Stack class allows you to place widgets on top of each other in a specified order.

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Your AndroidView code
          architectWidget,
          // Your AppBar code
          AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            shadowColor: Colors.transparent,
            title: Text(
              'App Bar',
              style: const TextStyle(color: Colors.black),
            ),
            automaticallyImplyLeading: false,
          ),
        ],
      ),
    );
}

Flutter Stack class