How to reposition a fixed widget in flutter

Question

I'm building an AR app with Flutter and using the ar_flutter_plugin.

The position of the AR widget seems to be fixed to the top left and it doesn't move anywhere else. Whatever the other widgets in the tree, doesn't change anything. It's always at top left corner (see image).

It works with a dummy widget just fine (compare second img).

Child Ar widget

  Widget build(BuildContext context) {
    return SizedBox(
        width: widget.width,
        height: widget.height,
        child: Column(
          children: [
            Expanded(
              child: Column(children: [
                Expanded(
                  child: ARView(
                    onARViewCreated: onARViewCreated,
                    planeDetectionConfig:
                        PlaneDetectionConfig.horizontalAndVertical,
                  ),
                ),
                Align(
                    alignment: Alignment(1, 1),
                    child: FloatingActionButton(onPressed: takePicture))
              ]),
            ),
          ],
        ));
  }

Parent Widget

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      key: scaffoldKey,
      backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
      body: SafeArea(
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            children: [
              Container(
                width: 350,
                height: 350,
                child: ObjectsOnPlanesWidget(
                  // child: custom_widgets.ArPlaceholder(
                  width: double.infinity,
                  height: double.infinity,
                  modelUrl: widget.modelUrl,
                ),
              ),
              Align(
                alignment: AlignmentDirectional(-0.23, -0.92),
                child: Padding(
                  padding: EdgeInsetsDirectional.fromSTEB(8, 24, 8, 24),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color:
                              FlutterFlowTheme.of(context).secondaryBackground,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: InkWell(
                          onTap: () async {
                            Navigator.pop(context);
                          },
                          child: Icon(
                            Icons.chevron_left,
                            color: Colors.black,
                            size: 24,
                          ),
                        ),
                      ),
                      Text(
                        'Try On',
                        style: FlutterFlowTheme.of(context).bodyText1,
                      ),
                      Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color:
                              FlutterFlowTheme.of(context).secondaryBackground,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Icon(
                          Icons.share_outlined,
                          color: Colors.black,
                          size: 24,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                alignment: AlignmentDirectional(0, 0.95),
                child: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: FlutterFlowTheme.of(context).secondaryBackground,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Icon(
                    Icons.photo_camera,
                    color: Colors.black,
                    size: 24,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

I want to put the camera in the background and put other widgets (such as photo-taking-button) on top of it.

How do I reposition it into a container? At least under the App Bar?

Answer 1

Logically this should have worked, what i would suggest you try would be to first have a SafeArea widget.

SafeArea(
child: build(buildContext),
),

I had a similar issue in the past and using this solved it.

Also, there seems to be an open issue which seems related to this with the following possible solution :

With Flutter 2.10.5. it works without problems. This seems to be a Flutter 3 problem.
The way platforms views are rendered was changed in the 3.0 release.

probably same issue:
flutter/flutter#106246
explained here:
flutter/flutter#103630

I hope this will be fixed in new Flutter 3 releases soon.

And also this

I try the master channel Flutter v3.1.0-0.0.pre.1372 and the issue is fixed there.

Fixed will come to a stable channel soon with Flutter v3.1.0.

Also, I am not sure why are you using SizedBox as your parent widget.

Why not try a basic Container instead?

Good luck, Let me know if I can help with anything else