Text doesn't appear over CameraPreview layout

user_2083523 0
Viewed 90

I'm trying to create a camera screen in my app that resembles a scanner apps screen. The final design should look something like this:

enter image description here

I was able to create the camera+layout screen by using CameraPreview widget and providing a layout child:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: GestureDetector(
        onLongPress: () async {
          // some logic
        },
        child: Column(children: [
          Stack(children: [
            Text("Center your camera over the indicator ", style: TextStyle(color: Colors.white)),
            Padding(
              padding: EdgeInsets.only(top: 70.0),
              child: FutureBuilder<void>(
                future: _initializeControllerFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    // If the Future is complete, display the preview.
                    return CameraPreview(_controller,
                        child: MaterialPreviewOverlay(
                          overlayColor: overlayColor,
                        ));
                  } else {
                    // Otherwise, display a loading indicator.
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),
            )
          ])
        ])),
  );
}

The MaterialPreviewOverlay doesn't have too much logic, mainly it calls the painter that looks like this:

@override
void paint(Canvas canvas, Size size) {
  final screenRect = Rect.fromLTWH(0, 0, size.width, size.height);
  final cutOutWidth = screenRect.width - 80;
  final cutOutHeight = cutOutWidth * 1.7;
  final cutOut = RRect.fromRectAndCorners(
      Rect.fromCenter(
          center: screenRect.center,
          width: cutOutWidth,
          height: cutOutHeight),
      bottomLeft: const Radius.circular(40),
      topRight: const Radius.circular(40),
      topLeft: const Radius.circular(40)
  );
  final cutOutPath = Path.combine(PathOperation.difference,
      Path()..addRect(screenRect), Path()..addRRect(cutOut));
  final borderPaint = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5 // strokeWidth is painted 50/50 outwards and inwards.
    ..color = overlayColor;//.withAlpha(160);
  canvas
    ..drawPath(cutOutPath, backgroundPaint)
    ..drawRRect(cutOut.deflate(borderPaint.strokeWidth / 2), borderPaint);
}

For some reason the Text widget isn't shown at all. I tried with Stack (like in the provided code example) and without. If I put the text below the FutureBuilder widget the text is shown (both with and without using Stack) and if I add an appBar to the Scaffold the text is also shown beneath the app bar. But I do not need the app bar, why wouldn't the text appear in my example?

flutter-layout flutter
2 Answers

Your Text widget doesn't show up since your Stack order is Text and then the CameraPreview. This means that your Text widget will be drawn and on top of it your CameraPreview will be drawn, which means that your Text widget isn't visible anymore. To fix your issue you have to reorder your Stack so that CameraPreview is before Text.

Stack(
  children: [
    CameraPreview(),
    Text('My Text'),
  ],
),
user_99363840

After trying to align the Stack widget using (alignment: AlignmentDirectional.topCenter) with no success, I saw it does work if I put, for example, AlignmentDirectional.bottomCenter.

Then I realized that text does appear in topCenter but is hidden by the iPhone notch. Padding it, solved the issue.

user_20835230
Related