Flutter Question posted in
The official Flutter documentation can be found here.

How to Align Text below QR code Scanner Overlay in Flutter?

I have implemented QR Code Scanner for my app and I want to align text dynamically below the Overlay of QR Code Scanner. I have used qr_code_scanner package. I have tried it to make in Stack widget and wrap Text with Align like this:

Stack(
  children: <Widget>[
    _buildQRView(context), //QR Code Scanner Overlay
    Align(
      alignment: Alignment(0.0, 0.4),
      child: Text(
        "Scan QR Code",
        style: TextStyle(color: Colors.white,),
      ),
    ),
  ],
),

For my device I gave static alignment: AlignmentIt(0.0, 0.4) and works perfectly fine in my device but when I try to run in another devices it will goes above the Overlay or align according to different device’s size. I want to make it dynamic means if device size is anything then It would be stick to below the QR Code Scanner’s Overlay.

Here’s my device image:
qr_code_scanner_text_alignment

Tags:

2

Answers


  1. 0

    Try to use Positioned widget and align the widget using left, right, top and bottom parameters.

    Login or Signup to reply.
  2. 0

    try this:

       Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _buildQRView(context), //QR Code Scanner Overlay
        const Text(
          "Scan QR Code",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ],
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search