flutter, how to wrap barcode and qr code in the same container? - flutter

Question

I'm trying to make the barcode above the qrcode and I will like to make them in the same container, how should I edit it?
Thanks Alot!
body: SafeArea(
child: Center(
child: Column(
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
Container(
decoration: BoxDecoration(
color: mFillColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: mBorderColor, width: 1),
),
margin: const EdgeInsets.only(left: 30, right: 30),
width: double.infinity,
height: 350,
child: Padding(
padding: const EdgeInsets.all(90.0),
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
),
],
),
),
),
What this code will show:
The effect that I want:

Answer 1

This is how you do this task. First you design a parent Container and then use a Column widget which contains two sizedBox as a children one is for barcode and second is for QrCode. Just like this
Scaffold(
body: SafeArea(
child: Container(
height: 250,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 1),
),
margin: const EdgeInsets.all(30),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
const Text(
"2810 1102 0604 3155 4434 2047",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 150,
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
const Text(
"Any text here",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
)