qrScanner inside Expanded layer, How to add two button in Flutter

Question

---

In flutter, I want to make an application that scans qr code and display the qr text. I have two buttons, which are done, scan again.

And how to put that 2 button, bottom of that scan area. If i try to put that button inside expanded layer, it looks all red

Here is the code & screenshot.

How can i solve this ?

---

import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:qr_code_scanner/qr_scanner_overlay_shape.dart';

void main() => runApp(MaterialApp(home: QRSCAN()));

const flash_on = "FLASH ON";
const flash_off = "FLASH OFF";
const front_camera = "FRONT CAMERA";
const back_camera = "BACK CAMERA";

class QRSCAN extends StatefulWidget {
  const QRSCAN({
    Key key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _QRSCANState();
}

class _QRSCANState extends State<QRSCAN> {
  bool Done_Button = false;
  var qrText = "";
  QRViewController controller;
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  @override


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.blueAccent),
          onPressed: () {
            Navigator.pop(context);
            controller?.pauseCamera();
          },
        ),
        elevation: 0.0,
        backgroundColor: Colors.white,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help_outline, color: Colors.grey,),
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
              overlay: QrScannerOverlayShape(
                borderColor: Colors.blueAccent,
                borderRadius: 10,
                borderLength: 130,
                borderWidth: 5,
                overlayColor: Color(0xff010040),
              ),
            ),

            flex: 4,
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("$qrText", style: TextStyle(color: Colors.black,),),
                  InkWell(
                    onTap: () async {
                      Navigator.pop(context);
                    },
                    child: Container(
                      width: 100.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5)),
                          gradient: LinearGradient(colors: [
                            Color(0xFF1E75BB),
                            Color(0xFF1EEABB),
                          ])),
                      child: Center(
                        child: Text(
                          'Done',
                          style: TextStyle(
                            color: Colors.white,
                            letterSpacing: 1.5,
                            fontSize: 12.0,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'Play',
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 25,
                  ),
                  InkWell(
                    onTap: () async {
                      setState(() {
                        qrText = "";
                        controller?.resumeCamera();
                        Done_Button = false;
                      });
                    },
                    child: Container(
                      width: 100.0,
                      height: 50.0,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5)),
                          gradient: LinearGradient(colors: [
                            Color(0xFF1E75BB),
                            Color(0xFF1EEABB),
                          ])),
                      child: Center(
                        child: Text(
                          'Again',
                          style: TextStyle(
                            color: Colors.white,
                            letterSpacing: 1.5,
                            fontSize: 12.0,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'Play',
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            flex: 1,
          ),
        ],
      ),

    );
  }

  _isFlashOn(String current) {
    return flash_on == current;
  }

  _isBackCamera(String current) {
    return back_camera == current;
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData;
        controller?.pauseCamera();
        Done_Button = true;
      });
    });
  }
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Answer 1

you can refactor your code as follows

 ` Column(children: <Widget>[

            /* QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
              overlay: QrScannerOverlayShape(
                borderColor: Colors.blueAccent,
                borderRadius: 10,
                borderLength: 130,
                borderWidth: 5,
                overlayColor: Color(0xff010040),
              ),
            ),*/
            SizedBox(height:5),
            Center(
              child: Container(height: 100, color: Colors.white, width: 100),
            ),
            Text(
              "$qrText",
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            InkWell(
              onTap: () async {
                Navigator.pop(context);
              },
              child: Container(
                width: 100.0,
                height: 50.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    gradient: LinearGradient(colors: [
                      Color(0xFF1E75BB),
                      Color(0xFF1EEABB),
                    ])),
                child: Center(
                  child: Text(
                    'Done',
                    style: TextStyle(
                      color: Colors.white,
                      letterSpacing: 1.5,
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Play',
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 25,
            ),
            InkWell(
              onTap: () async {
                setState(() {
                  qrText = "";
                  //   controller?.resumeCamera();
                  //  Done_Button = false;
                });
              },
              child: Container(
                width: 100.0,
                height: 50.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    gradient: LinearGradient(colors: [
                      Color(0xFF1E75BB),
                      Color(0xFF1EEABB),
                    ])),
                child: Center(
                  child: Text(
                    'Again',
                    style: TextStyle(
                      color: Colors.white,
                      letterSpacing: 1.5,
                      fontSize: 12.0,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Play',
                    ),
                  ),
                ),
              ),
            ),
          ]),

    );`